javascript - React hooks 状态变量在重新渲染后未更新

Question

在下面的示例中，我有一个元素(水果)数组，我想要更新它并使用更新后的数组执行其他操作(在本例中保存更新后的列表)。我的理解是重新渲染状态将更新......但它不在这里......或者状态更新和我的操作之间存在延迟。

在 addFruit 函数中，我可以看到“Peach”立即被添加，但 saveFruits 函数的控制台仍然显示 fruit 状态仍然存在不变。我怎样才能更新它以立即使用。 (我知道在这种情况下，我可以将 newFruits 变量传递给 saveFruits 进行更新，但我也需要 fruits 为其他地方进行更新) 。

请原谅我，因为这是我关于 react 异步状态的第一百万个问题，但有些东西还没有让我满意。

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]);