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

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(() => {&nbsp; &nbsp; saveFruits();&nbsp; }, [fruits]);