反应钩子状态变量在重新渲染后不更新

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的钩子：不是魔术，而是数组 ，以更好地了解钩子幕后发生的事情。 它有助于很多解释。