问题

Question

我正在尝试解决无法解决的问题。问题是我有一个带有选择标记的下拉框，其中带有一些菜单项。当我单击菜单项之一时，该值未出现在选择框中，而只是空的。但是，当我用控制台登录所选项目时，我可以看到我正在选择的菜单项。这是代码：

<Select labelId="demo-simple-select-label" id="demo-simple-select" value={selectedMake} onChange={handleMake}>
              {console.log(makes)}
              {makes &&
                makes.map((select, key) => (
                  <MenuItem key={key} value={select}>
                      {console.log(select)}
                    {select.name}
                  </MenuItem>
                ))}
            </Select>

如果您想知道“ makes”是什么，就是这样：

(3) [{…}, {…}, {…}]
0: {name: "Honda", id: "5de9c553bce4b703a335c204"}
1: {name: "Toyota", id: "5e4dfbee2d445b7525414c1f"}
2: {name: "Suzuki", id: "5e4e00732d445b7525414c46"}

例如，不确定为什么选择本田时，它没有显示在框中。我认为这可能与ID有关。让我知道如何解决这个问题。

这也是handleMake函数，该函数作为prop从另一个文件中传入：

handleMake = (event) => {
    this.setState({
      selectedMake: event.target.value.name,
      selectedMakeId: event.target.value.id,
    });
  };

Answer 1

问题

对象不能是选择选项的值，它必须是非对象值。在您中，您将选项值设置为整个“ make object, but setting the Select value to *just* the make's name`属性，该属性永远不会匹配。

handleMake = (event) => {
  this.setState({
    selectedMake: event.target.value.name, // <-- make's name
    selectedMakeId: event.target.value.id,
  });
};

...

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={selectedMake} // <-- only a make's name
  onChange={handleMake}
>
  {makes.map((select, key) => (
    <MenuItem key={key} value={select}> // <-- entire make object!
      {select.name}
    </MenuItem>
  ))}
</Select>

解决方案

我建议将选定的索引或id存储在状态中。

无需将大量数据复制到状态中，因为您可以轻松地从存储的数组索引中得出汽车品牌和ID，也可以使用ID搜索。如果您使用了来自制造对象之一的数据，则每次（makes线性时间）都需要搜索O(n)数组以找到匹配项，但是通过使用索引，您只能得到使O(1)恒定时间内需要对象。

handleMake = (event) => {
  this.setState({
    selectedMake: event.target.value,
  });
};

...

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={this.state.selectedMake} // <-- value is "index"
  onChange={this.handleMake}
>
  {makes.map((make, index) => (
    <MenuItem key={index} value={index}> // <-- pass index as "value"
      {make.name}
    </MenuItem>
  ))}
</Select>

例如，如果selectedMake === selectedMake，则使用0：

makes[selectedMake] // { name: "Honda", id: "5de9c553bce4b703a335c204"}

示例组件

function App() {
  const [selectedMake, setSelectedMake] = useState(-1);

  const changeHandler = (e) => setSelectedMake(e.target.value);

  useEffect(() => {
    console.log(selectedMake, makes[selectedMake]);
  }, [selectedMake]);

  return (
    <div className="App">
      <select value={selectedMake} onChange={changeHandler}>
        <option disabled value={-1}>
          Make
        </option>
        {makes.map((make, i) => (
          <option key={make.id} value={i}>
            {make.name}
          </option>
        ))}
      </select>
    </div>
  );
}

在下拉框中选择时未显示选项值

1 个答案:

问题

解决方案