從props值設置一個子數組狀態對象

Question

我正在使用鈎子創建一個React應用程序，但是我的代碼出現了奇怪的行為，我不會將所有代碼都放在這里，但是我會給你一個例子。

const Child = props => {
   const {data} = props;
   const [myData, setMyData] = useState(data);

  const items => myData.map( r => <li> r </li> );

   return ( <ul> { items } </ul> );
}

const Parent = () => {

   return (<div> 
             <Child data={ [1, 2, 3] } 
           </div> );
}

我正在更改父組件發送給子組件的數組。 當我向數組添加新元素時，Child組件重新渲染，因此MyData等於數組（這是有道理的，因為通過props change可以重新渲染Child組件）。 如果我從數組中刪除元素，則將重新渲染Child組件，但myData不會更改，並且從數組中刪除的元素仍在myData中。

為什么當我向數組中添加元素時useState將該數組設置為myData，但是當我刪除元素時，即使重新渲染Child組件，這似乎也不起作用。

我知道這似乎有點愚蠢，您可以問我，為什么不只在Child組件上使用props值而不是state值，好主意是在Child組件上有一個搜索控件，因此我可以在MyData上而不是在props值上進行某種搜索（但也許有另一種方法）。

Answer 1

我認為問題在於您如何使用道具。

當Child渲染時，它將從Parent那里獲得props.data 。 然后，它將data復制為變量myData到其組件狀態。

從此以后，對props更改可以觸發Child重新渲染，但不會通過useState重新定義myData 。 那只會發生一次。

如果您正在編寫進行熱重載的代碼（保存文件，然后在瀏覽器中重載應用程序），則看起來好像更改發送給Child的道具會更新myData ，但這在生產環境中不會發生。

我的建議：如果您要將道具插入Child的狀態，請將道具視為初始值，而不是Parent可以更新的東西。

React docs解釋了為什么這是反模式：

問題在於，這既不必要（您可以直接使用this.props.color ）， this.props.color產生錯誤（對color prop的更新不會反映在狀態中）。

僅當您有意忽略道具更新時才使用此模式。

React構造函數文檔

Answer 2

useEffect(() => {
    setMyData(data)
},[data])

您的數據將僅加載一次狀態。 但是您可以使用useEffect處理父組件對數據的更改，useEffect將在數據更新時更新

有完整的代碼

const Child = props => {
   const {data} = props;
   const [myData, setMyData] = useState(data);

    useEffect(() => {
        setMyData(data)
    },[data])

  const items => myData.map( r => <li> r </li> );

   return ( <ul> { items } </ul> );
}

const Parent = () => {

   return (<div> 
             <Child data={ [1, 2, 3] } 
           </div> );
}

您可以閱讀有關React使用效果的信息