React 在状态更改后重新渲染子组件

Question

我在 React 中有一个组件，它可以渲染@material-ui表(如果重要，可以通过 React Router 访问(。在表格中，我有一个react-select下拉菜单，但是它通过单独的组件呈现。下面是该父组件的代码：

return(
<>
<Table aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell align="center"><GameTypeSelector onGameTypeChange={setSelectedGameType} gameTypes={gameTypes} /></StyledTableCell>
...

显然，我将在一秒钟内到达的GameTypeSelector呈现下拉列表，gameTypes包含它的选项。setSelectedGameType应该更新一个局部状态变量，该变量将在每次下拉列表更改时保存新值：

const [selectedGameType, setSelectedGameType] = useState(null);

所以最后一件事是其他组件本身。这也非常简单：

const [selected, setSelected] = useState({ value: "", label: "Please select game type" });
const [options, setOptions] = useState([]);
useEffect(() => {
//set options here
}, [props]);
useEffect(() => {
console.log("in use effect of gamte type selectedo");
props.onGameTypeChange(selected.value);
}, [selected.value, props]);
return (
<>
<Select
value={selected}
onChange={selectedOption => setSelected({ value: selectedOption.value, label: selectedOption.label })}
options={[{ value: null, label: "All" }, ...options]}
/>
</>
);

当我从下拉列表中更改值时，会发生最奇怪的事情。它更新本地selected，然后从父控制器调用函数。该函数反过来更新selectedGameType，该仍然正常且按预期工作。

但是，在该更新之后，它会再次重新渲染表中的GameTypeSelector，然后将里面的selected值设置为来自此行useState({ value: "", label: "Please select game type" });的默认值。之后，selectedGameType的父值也设置为无。

在浏览器中，它看起来像这样：我从下拉列表中选择一个值，它将其设置在其中，更新父组件(通过不同的控制台日志计算(，然后重置GameTypeSelector组件，它转到其默认值。它只重新渲染该单个部分，表的其余部分保持不变，不会重新渲染，并且代码中没有任何内容涉及其他任何地方的selectedGameType。

知道出了什么问题吗？我想我在这里错过了一些关键的东西，但我无法弄清楚是什么？

Answer 1

这就是 React 应该的工作方式，如果您将组件设置为状态，那么它将始终显示该状态，您需要实现方法来处理更改并根据需要更新状态。 查看此链接