0

我们有一个 SPA，我们正在从 CRA 迁移到 next.js。到目前为止，大多数事情都很顺利。我们需要构建一个自动完成搜索栏，因此我们从 MUI v5 开始Autocomplete，它在开发中完美运行，但是当我们将其部署为静态 html/css 时，生产中提供的应用程序不会显示搜索结果。

最初的假设是它是 MUI v5 的怪癖，所以我们切换到使用 Paper 降档以显示自动完成结果，但不幸的是，我们仍然遇到相同的问题，即没有渲染，但只是在部署中。在本地，一切都完美无缺

这是组件在降档时的外观：

type Property = {
  address?: string;
  propertyId?: string;
};

const Dropdown: FC = () => {
  const [address, setAddress] = useState<string | null>(null); // search term
  const { propertyList: property } = useSearchbar(address);
  const history = useHistory();

  const handleStateChange = (changes: any): void => {
    if (Object.prototype.hasOwnProperty.call(changes, 'selectedItem')) {
      setAddress(changes.selectedItem);
    } else if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) {
      setAddress(changes.inputValue);
    }
  };

  const label = (): JSX.Element => {
    return (
      <Box sx={{ display: 'flex' }}>
        <SearchIcon sx={{ color: '#000000' }} />
        <Typography sx={{ color: ' #0000009C', fontStyle: 'italic', ml: 2 }}>
          Enter Any NYC Address
        </Typography>
      </Box>
    );
  };

  const handleOnSelect = (selectedItem: any): void => {
    if (selectedItem?.propertyId) {
      history.push(`/bldgs/${selectedItem?.propertyId}`);
    }
  };

  return (
      <Downshift
        onStateChange={handleStateChange}
        onSelect={handleOnSelect}
        itemToString={(item) => (item ? item.address : '')}
      >
        {({
          getInputProps,
          getMenuProps,
          getItemProps,
          clearSelection,
          getToggleButtonProps,
          isOpen,
          highlightedIndex
        }) => (
          <div>
            <Box sx={{ display: 'flex' }}>
              <TextField
                sx={{ width: '95%', ml: 2, mr: 2, mt: 1, mb: 1 }}
                variant="filled"
                label={label()}
                inputProps={getInputProps({
                  placeholder: 'Search'
                })}
                InputProps={{
                  sx: {
                    background: '#FFFFFF'
                  },
                  disableUnderline: true
                }}
              />
              <Box sx={{ mt: 3, mr: 2 }}>
                {isOpen && (
                  <button {...getToggleButtonProps()} onClick={clearSelection}>
                    <svg
                      viewBox="0 0 20 20"
                      preserveAspectRatio="none"
                      width={12}
                      fill="transparent"
                      stroke="#979797"
                      strokeWidth="1.1px"
                    >
                      <path d="M1,1 L19,19" />
                      <path d="M19,1 L1,19" />
                    </svg>
                  </button>
                )}
              </Box>
            </Box>
            {isOpen && property.length > 0 && (
              <Paper>
                <List
                  {...getMenuProps()}
                  sx={{
                    width: { xs: 300, sm: 500, md: 850, lg: 500 }
                  }}
                >
                  {property.map((item: Property, index) => (
                    <ListItemButton
                      key={`${item.propertyId}-${index}`}
                      {...getItemProps({
                        style: {
                          backgroundColor:
                            index === highlightedIndex ? 'lightgray' : 'white'
                        },
                        item,
                        index
                      })}
                    >
                      <ListItemText primary={item.address} />
                    </ListItemButton>
                  ))}
                </List>
              </Paper>
            )}
          </div>
        )}
      </Downshift>
  );
};

export default Dropdown;

nextjs 导出生成的静态文件由运行在 k8s 集群中的 nodejs 服务器提供服务。

关于可能发生的事情有什么想法吗？

4

0 回答 0