时间戳

首页 > 解决方案 > React 在状态更改后重新渲染子组件

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

问题描述

我在 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其他任何地方。

知道有什么问题吗？我想我在这里遗漏了一些重要的东西，但我不知道是什么？

标签： reactjsreact-hooksreact-functional-component

解决方案

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

推荐阅读