反應鈎子狀態變量在重新渲染后不更新

Question

在下面的示例中，我有一個要更新的元素（水果）數組，並使用更新后的數組執行其他操作（在此特定情況下，保存更新后的列表）。 我的理解是關於重新渲染狀態將更新的信息，但是這里沒有。或者狀態更新和我的操作之間存在延遲。

在addFruit函數中，我可以看到立即添加了“ Peach”，但是saveFruits函數的控制台仍然顯示狀態fruit保持不變。 我該如何更新才能立即使用。 （我知道在這種情況下，我可以將newFruits變量傳遞給saveFruits進行更新，但我也需要在其他地方更新fruits ）。

請原諒我，因為這是我關於響應異步狀態的百萬分之一的問題，但是有些事情還沒有為我解決。

 const { useState } = React; function ParentComp() { const[fruits, setFruits] = useState(['Apple', 'Orange', 'Banana', 'Pomegranate', 'Kiwi']) const addFruit = () => { let newFruits = Object.assign([], fruits) newFruits.push('Peach') setFruits(newFruits) saveFruits() } const saveFruits = () => { console.log('API req to save fruits.', fruits) } return ( <div> { fruits.map( (fruit, key) => <div key={key}>{fruit}</div> ) } <button type="button" onClick={addFruit}>Add Peach</button> </div> ) } ReactDOM.render(<ParentComp />, document.getElementById('root')) 

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <div id="root"></div> 

Answer 1

您可以嘗試使用useEffect，只要有更新，它將提供更新的狀態。

useEffect(() => {
    saveFruits();
  }, [fruits]);

Answer 2

這是不准確的console.log fruits ，因為引用fruits仍然是指fruits你有你打電話之前setFruits 。

如果我們更改了console.log newFruits ，那么它將更准確地顯示正在發生的事情。

編輯：最好使用useEffect作為@Atul建議的內容。

有時有助於可視化在舊的React類中是如何完成的。 在舊的React類中，這等效（在某種程度上實際上不是，但是足夠接近以說明問題）（更多信息： https : //reactjs.org/docs/hooks-state.html ）

 class ParentComp extends React.Component { constructor() { super(); this.state = { fruits: ['Apple', 'Orange', 'Banana', 'Pomegranate', 'Kiwi'] }; } addFruit = () => { let newFruits = Object.assign([], this.state.fruits); newFruits.push('Peach') this.setFruits(newFruits) this.saveFruits(); } setFruits = (fruits) => { this.setState({ fruits }); } saveFruits = () => { console.log(this.state.fruits); } render() { return ( <div> {this.state.fruits.map((fruit, key) => { return (<div key={key}>{fruit}</div>) })} <button type="button" onClick={this.addFruit}>Add Peach</button> </div> ); } } ReactDOM.render(<ParentComp /> , document.getElementById('root')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div> 

上面我們遇到了同樣的問題，但可能會更清楚一些。 雖然確實調用了fruits的setState，但是console.log在狀態/渲染更改發生之前發生，所以this.state.fruits仍然引用該狀態之前的狀態。

我強烈建議閱讀React的鈎子：不是魔術，而是數組 ，以更好地了解鈎子幕后發生的事情。 它有助於很多解釋。