<select> 基于先前状态的状态的更新<select>状态警告

Question

我有两个下拉列表，第二个下拉列表的值应该根据第一个下拉列表状态更新。尽管代码似乎可以工作，但我收到了关于out-of-range value的警告。如何改进此代码以使警告消失？

Codesandbox 上的MWE

最好是完整的组件。

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>s的列表中。因此，它会发出警告。

一个简单的修复方法是在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>
//...