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

Question

在下面的示例中，我有一个要更新的元素（水果）数组，并使用更新后的数组执行其他操作（在此特定情况下，保存更新后的列表）。我的理解是关于重新渲染状态将更新的信息，但是这里没有。或者状态更新与我的操作之间存在延迟。在addFruit函数中，我可以看到立即添加了“ Peach”，但该saveFruits函数的控制台仍显示状态fruit保持不变。我该如何更新才能立即使用。（我知道在这种情况下，我可以将newFruits变量传递saveFruits给update，但是我也需要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]);