javascript - 使用自动完成作为自定义过滤器的 MUI 数据表

Question

我正在尝试在 MUI-Datatables 的过滤器中使用 Material-UI Autocomplete 字段。视觉上工作，我可以选择选项，但在我应用过滤器的那一刻，它崩溃并出现错误：

TypeError: Cannot read property 'length' of undefined

useAutocomplete/useAutocomplete.js:241
  238 | }) : [];
  239 | 
  240 | if (process.env.NODE_ENV !== 'production') {
> 241 |   if (value !== null && !freeSolo && options.length > 0) {
      | ^  242 |     var missingValue = (multiple ? value : [value]).filter(function (value2) {
  243 |       return !options.some(function (option) {
  244 |         return getOptionSelected(option, value2);

这是我在列设置中使用的代码：

{
      name: "marca",
      label: "Marca",
      options: {
        filter: true,
        sort: false,
        filterType: "custom",
        sortThirdClickReset: true,
        customFilterListOptions: {
          render: (v) => `Marca: ${v}`,
        },
        filterOptions: {
          display: (filterList, onChange, index, column) => {
            return (
              <Autocomplete
                disableClearable
                getOptionLabel={(status) => status.marca}
                options={info.filters.marcas}
                noOptionsText={"No se encontraron resultados"}
                defaultValue={
                  filterList[5].length > 0
                    ? { marca: filterList[5][0] }
                    : { marca: "Todos" }
                }
                onChange={(event, value) => {
                  filterList[index] = [value.marca]
                  onChange(filterList[index], index, column)
                }}
                renderInput={(params) => (
                  <TextFieldMaterial
                    {...params}
                    fullWidth
                    margin="normal"
                    label="Marcas"
                    InputLabelProps={{
                      shrink: true,
                    }}
                  />
                )}
              />
            )
          },
        },
      },
    },

使用标准选项可以正常工作并且可以过滤，但是有太多选项落后于选择器。

我一直在努力使其“API 友好”，因为我需要像 &marca=1 一样过滤，它会尝试过滤为 &marca=FORD，导致 MUI-Datatables 不能（或者我不知道）如何操作表数据和过滤器的值和标签

标签： javascriptreactjsmaterial-uimui-datatable