根据先前 <select> 状态更新 <select> 状态的警告

Question

我有两个下拉菜单，第二个下拉菜单的值应该根据第一个下拉菜单的状态更新。虽然代码似乎有效，但我收到 out-of-range value 的警告。我如何改进此代码以使警告消失？

完整的组件以备不时之需。

const MyForm = () => {
  const [state1, setState1] = useState(list1[0]);
  const [state2, setState2] = useState(list2[0]);

  return (
    <>
      <FormControl fullWidth sx={{ marginY: "16px" }}>
        <InputLabel>List 1</InputLabel>
        <Select
          label="List 1"
          value={state1.code}
          onChange={(e) => {
            const tmpState1 = list1.find(
              (item) => item.code === e.target.value
            );
            setState1(tmpState1);
          }}
        >
          {list1.map((item) => {
            return (
              <MenuItem value={item.code} key={item.name}>
                {item.name}
              </MenuItem>
            );
          })}
          <MenuItem value={""}>All</MenuItem>
        </Select>
      </FormControl>
      <FormControl fullWidth sx={{ marginY: "16px" }}>
        <InputLabel>List 2</InputLabel>
        <Select
          label="List 2"
          value={state2.name}
          onChange={(e) => {
            const tmpState2 = list2.find(
              (item) => item.name === e.target.value
            );
            console.log(tmpState2);
            setState2(tmpState2);
          }}
        >
          {list2
            .filter((item) => item.code === state1.code)
            .map((item) => {
              return (
                <MenuItem value={item.name} key={item.name}>
                  {item.name}
                </MenuItem>
              );
            })}
        </Select>
      </FormControl>
    </>
  );
};

export default MyForm;

Answer 1

问题是当变量 state1 更新时，第二个下拉列表的值不在更新的 <MenuItem> 列表中。因此它会发出警告。

一个简单的解决方法是在 state1 更改时更新第二个下拉列表中的值：

//...
<FormControl fullWidth sx={{ marginY: "16px" }}>
  <InputLabel>List 1</InputLabel>
    <Select
      label="List 1"
      value={state1.code}
      onChange={(e) => {
        const tmpState1 = list1.find(
          (item) => item.code === e.target.value);
        {/* this is the fix */}
        setState2(list2.find((item) => item.code === tmpState1.code));
        setState1(tmpState1);
      }}
    >
      {list1.map((item) => {
        return (
          <MenuItem value={item.code} key={item.name}>
            {item.name}
          </MenuItem>
        );
      })}
    <MenuItem value={""}>All</MenuItem>
  </Select>
</FormControl>
//...

根据先前 <select> 状态更新 <select> 状态的警告

Warnings on update state of <select> based on state of previous <select> state

javascript

drop-down-menu

reactjs