[英]useEffect doesn't reload child component when its state changes
I have a react component structure like this:我有一个这样的反应组件结构:
In my table component, I have an option to trigger a modal that prompts user to give some input, which will then send a put request to the backend.在我的表格组件中,我可以选择触发一个模式,提示用户提供一些输入,然后向后端发送一个 put 请求。 In code it looks something like this:在代码中,它看起来像这样:
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 ... />
)
}
I want to refresh (only) the table component once the modal closes, but in this current setup, useEffect
doesn't reload the table component when its state ( inputFromModal
) changes.一旦模态关闭,我想(仅)刷新表格组件,但在当前设置中,当其 state ( inputFromModal
)更改时, useEffect
不会重新加载表格组件。 Was I wrong in thinking that useEffect
would reload the component when the state changed?当 state 改变时,我认为useEffect
会重新加载组件是错误的吗?
It is not part of useEffect
to re-render your component.重新渲染组件不是useEffect
的一部分。 component will re-render when its state is changing or Parent component re-render.组件将在其 state 更改或父组件重新渲染时重新渲染。
By using useEffect
, you tell React that your component needs to do something after render.通过使用useEffect
,你告诉 React 你的组件需要在渲染后做一些事情。 (or in this case after every change of inputFromModal
. it means that you are making put request every time inputFromModal
is being changed. (或者在这种情况下,在每次更改inputFromModal
之后。这意味着每次更改inputFromModal
时您都在发出 put 请求。
For conclusion, in order to re-render your component, you need the data props to be updated by parent component.总而言之,为了重新渲染您的组件,您需要由父组件更新数据道具。
You missed one point here, your table will be re-render only when the parent components re-render or the state of your MyTable Component changes , now the data which you are taking from props, set it in your state so that whenever that data changes your component will re-render您在这里错过了一点,仅当父组件重新渲染或您的 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.