![](/img/trans.png)
[英]React useEffect doesn't reload my component after state update
[英]useEffect doesn't reload child component when its state changes
我有一个这样的反应组件结构:
在我的表格组件中,我可以选择触发一个模式,提示用户提供一些输入,然后向后端发送一个 put 请求。 在代码中,它看起来像这样:
const ParentContainer = (): JSX.Element => {
const dataToPassDown = useSelector((state:IRootState) => selectData(state));
return (
<ParentComponent data={dataToPassDown}/>
)
}
const ParentComponent = (props): JSX.Element => {
const {data} = props;
return (
<MyHeader data = {data}/>
<MyTable data = {data.tableData} />
)
}
const MyTable = (props): JSX.Element => {
const {data} = props;
const [inputFromModal, setInputFromModal] = useState("");
const dispatch = useDispatch();
useEffect(() => {
dispatch(putRequest(inputFromModal);
}, [inputFromModal]);
return (
<Modal visible={false} updateInputValue={setInputFromModal}/>
<Table ... />
)
}
一旦模态关闭,我想(仅)刷新表格组件,但在当前设置中,当其 state ( inputFromModal
)更改时, useEffect
不会重新加载表格组件。 当 state 改变时,我认为useEffect
会重新加载组件是错误的吗?
重新渲染组件不是useEffect
的一部分。 组件将在其 state 更改或父组件重新渲染时重新渲染。
通过使用useEffect
,你告诉 React 你的组件需要在渲染后做一些事情。 (或者在这种情况下,在每次更改inputFromModal
之后。这意味着每次更改inputFromModal
时您都在发出 put 请求。
总而言之,为了重新渲染您的组件,您需要由父组件更新数据道具。
您在这里错过了一点,仅当父组件重新渲染或您的 MyTable 组件的 state 更改时,您的表格才会重新渲染,现在您从道具中获取的数据,将其设置在您的 state 中,以便每当该数据更改您的组件将重新渲染
const MyTable = (props): JSX.Element => {
const {data} = props;
const [inputFromModal, setInputFromModal] = useState("");
const [tableData, setTableData] = useState();
const dispatch = useDispatch();
useEffect(() => {
setTableData(data)
}, [data]);
useEffect(() => {
dispatch(putRequest(inputFromModal);
}, [inputFromModal]);
return (
<Modal visible={false} updateInputValue={setInputFromModal}/>
<Table ... />
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.