Автозаполнение пользовательского интерфейса материала getOptionSelected Несоответствие между жестко заданными параметрами и состоянием

Question

У меня есть этот Material UI Autocomplete Component, и всякий раз, когда я выбираю элемент, (1) его значение устанавливается в состояние. (2) Когда он выбран, он больше не должен отображаться в качестве опции в компоненте Autocomplete.

Однако обратите внимание на свойство options, которое я передал компоненту Autocomplete. Вы заметите, что у меня их 2, и 1 из них закомментирован. Проблема в том, что когда я использую подход, основанный на состоянии, моя реализация работает так, как ожидалось (т. Е. Удовлетворяет требованиям 1 и 2). Однако, когда я не использую подход на основе состояний и использую жестко запрограммированный массив, проверка равенства в методе handleGetOptionSelected кажется неуспешной.

Обратите внимание, что у меня уже есть решение этой проблемы, просто проверяя language. Мне больше интересно узнать, почему это происходит.

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

Мне интересно знать, почему это не удается при использовании жестко запрограммированного подхода по сравнению с подходом, основанным на состоянии. Итак, мой вопрос : Почему сравнение здесь не удается при использовании жестко заданного массива по сравнению с массивом на основе состояний?

Журналы массивов на основе состояний:

Hardcoded array logs:

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 (
      Выбранные языки  {languages.map ((элемент, индекс) => ( {item.language} ))} handleGetOptionSelected (параметр, значение)} onChange = {(событие, значение) => setLanguages ​​(значение)} ChipProps = {{style: {backgroundColor: "# 2EC5B6", borderRadius: "5px", color: "#fff", fontFamily : "Source Sans Pro"}}} id = "tags-standard" options = {[{language: "C"}, {language: "C#"}, {language: "C ++"}]} / / это вызывает ошибку при проверке равенства // options = {availableLanguages} // этот подход работает нормально getOptionLabel = {(option) => option.language} renderInput = {(params) => ( )} /> ); } 

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