即使使用现有的 getOptionSelect 参数，提供给 Material UI 自动完成的值也不正确

Question

我正在尝试构建我自己版本的 Google Places 自动完成功能，该版本在 Material UI 文档中具有特色。 自动完成功能有效，我可以使用结果更新组件的 state，但我仍然收到警告：

提供给自动完成的值无效。

正如他们建议的那样，我已将 getOptionSelected 添加到我的自动完成组件中，甚至将 getOptionSelected 的回调 function 的选项和值参数记录到控制台，以确保我的相等性测试返回匹配值。

这是我的组件（为简单起见，我删除了获取数据并设置选项 state 的部分，因为这与此问题无关）：

const PlacesAutocomplete = ({ place, editPlace, label }) => {
    const [inputValue, setInputValue] = useState("");
    const [options, setOptions] = useState([]);

    return (
      <Autocomplete
        options={options}
        getOptionLabel={(option) =>
          typeof option === "string" ? option : option.description
        }
        filterOptions={(x) => x}
        autoComplete
        filterSelectedOptions
        includeInputInList
        renderInput={(params) => (
          <TextField
            {...params}
            label={label}
            variant="outlined"
          />
        )}
        getOptionSelected={(option, value) => {
          console.log("option description: " + option.description);
          console.log("value: " + value);
          console.log("equality test: " + option.description === value);
          console.log("value type of: " + typeof value);
          console.log(
            "option description type of: " + typeof option.description
          );

          return option.description === value;
        }}
        value={place}
        onChange={(event, newValue) => {
          setOptions(newValue ? [newValue, ...options] : options);
          editPlace(newValue.description);
        }}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}
        renderOption={(option) => {
          const matches =
            option.structured_formatting.main_text_matched_substrings;
          const parts = parse(
            option.structured_formatting.main_text,
            matches.map((match) => [match.offset, match.offset + match.length])
          );

          return (
            <Grid container alignItems="center" spacing={2}>
              <Grid item>
                <LocationOnIcon />
              </Grid>
              <Grid item xs>
                {parts.map((part, index) => (
                  <span
                    key={index}
                    style={{ fontWeight: part.highlight ? 700 : 400 }}
                  >
                    {part.text}
                  </span>
                ))}

                <Typography variant="body2" color="textSecondary">
                  {option.structured_formatting.secondary_text}
                </Typography>
              </Grid>
            </Grid>
          );
        }}
      />
    );
  };

如您所见，我将值设置为相等性测试选项的 .description 属性。 当我将 value 和 option.description 记录到控制台时，我得到了具有相同类型的完全相同的值，但由于某种原因，相等测试返回 false，这就是我看到警告的原因。 即使 option.description 和 value 返回完全相同的值，我在 getOptionSelected 属性中从相等性测试中得到一个错误我做错了什么？

Answer 1

查看 getOptionSelected， option和value是同一类型，因此方法如下所示：

    getOptionSelected={(option, value) => option.description === value.description}

如果该值与选项的类型不同，则需要检查您是否没有在 state 内存储其他类型（或从place接收不同的值）。