Question

我有这个Material UI Autocomplete组件，每当我选择一个项目时，（1）将其值设置为状态。（2）选中它后，它不应再出现在“自动完成”组件上。

但是，请看一下我传递给自动完成组件的options道具。您会注意到我有2个，其中1个已被注释掉。问题是：当我使用基于状态的方法时，我的实现会按预期工作（即同时满足要求1和2）。但是，当我不使用基于状态的方法并使用硬编码数组时，在handleGetOptionSelected方法上进行相等性检查似乎失败。

请注意，我已经有了解决方案，只需检查language。我对获取有关为什么会发生这种情况的知识更感兴趣。

const handleGetOptionSelected = (option, value) => {
  return option.language === value.language;
}; /* I already know about this */

我有兴趣知道为什么使用硬编码方法与基于状态的方法相比会失败。因此，我的问题：为什么在使用硬编码数组与基于状态的数组时，此处的比较失败？

基于状态的阵列日志：

硬编码的阵列日志：

options={[{ language: "C" }, { language: "C#" }, { language: "C++" }]} // this causes error in equality checking

options={availableLanguages} // this approach works fine

import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import { Autocomplete } from "@material-ui/lab";

export default function App() {
  const [languages, setLanguages] = useState([]);

  const [availableLanguages] = useState([
    { language: "C" },
    { language: "C#" },
    { language: "C++" }
  ]);

  const handleGetOptionSelected = (option, value) => {
    console.log(`option`, option);
    console.log(`value`, value);
    console.log(`is equal`, option === value);
    return option === value;
  };

  return (
    <div className="App">
      <h1>Selected Languages</h1>
      <hr />
      {languages.map((item, index) => (
        <p key={index}>{item.language}</p>
      ))}
      <hr />
      <Autocomplete
        multiple
        name="ClassSchedule"
        filterSelectedOptions
        getOptionSelected={(option, value) =>
          handleGetOptionSelected(option, value)
        }
        onChange={(event, value) => setLanguages(value)}
        ChipProps={{
          style: {
            backgroundColor: "#2EC5B6",
            borderRadius: "5px",
            color: "#fff",
            fontFamily: "Source Sans Pro"
          }
        }}
        id="tags-standard"

        options={[
          { language: "C" }, 
          { language: "C#" }, 
          { language: "C++" }
        ]} // this causes error in equality checking

        // options={availableLanguages} // this approach works fine

        getOptionLabel={(option) => option.language}
        renderInput={(params) => (
          <TextField
            {...params}
            style={{
              borderRadius: "10px",
              backgroundColor: "#F5FCFB",
              fontFamily: "Source Sans Pro"
            }}
            variant="outlined"
            id="custom-css-outlined-input"
          />
        )}
      />
    </div>
  );
}

CodeSandBox：https://codesandbox.io/s/so-material-ui-autocomplete-question-gen4q?file=/src/App.js

材料UI自动完成功能getOptionSelected硬编码选项与状态之间的比较差异

0 个答案: