當 state 更改時，useEffect 不會重新加載子組件

Question

我有一個這樣的反應組件結構：

在我的表格組件中，我可以選擇觸發一個模式，提示用戶提供一些輸入，然后向后端發送一個 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會重新加載組件是錯誤的嗎？

Answer 1

重新渲染組件不是useEffect的一部分。 組件將在其 state 更改或父組件重新渲染時重新渲染。

通過使用useEffect ，你告訴 React 你的組件需要在渲染后做一些事情。 （或者在這種情況下，在每次更改inputFromModal之后。這意味着每次更改inputFromModal時您都在發出 put 請求。

總而言之，為了重新渲染您的組件，您需要由父組件更新數據道具。

Answer 2

您在這里錯過了一點，僅當父組件重新渲染或您的 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 ... />
 )  
}