![](/img/trans.png)
[英]React Child Rerenders without change in State, Props, or Parent
[英]React Rerenders Child Component After State Change
我在 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
。
知道出了什么问题吗? 我想我在这里遗漏了一些重要的东西,但我不知道是什么?
这就是 React 应该如何工作的,如果您将组件设置为一个状态,那么它将始终显示该状态,您需要实现方法来处理更改并根据需要更新状态。 看这个链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.