重新绑定后React挂钩状态变量不更新

Question

在下面的示例中，我有一个我想要更新的元素（水果）数组，并使用更新的数组执行其他操作（在此特定情况下保存更新的列表）。我的理解是重新报复国家将更新......但它不在这里......或者状态更新和我的行动之间存在延迟。

在addFruit函数中，我可以看到'Peach'被立即添加，但来自saveFruits函数的控制台仍然显示状态fruit保持不变。如何更新以立即使用。 （我知道在这种情况下我可以将newFruits变量传递给saveFruits进行更新，但我需要更新其他地方的fruits）。

请原谅我，因为这是我关于反应异步状态的第100个问题，但有些东西只是没有点击我。

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

console.log fruits不准确，因为对fruits的引用仍然是指你在调用fruits之前所拥有的setFruits。

如果我们的console.log newFruits有变化，它会更准确地发生了什么。

编辑：尽管@Atul建议，useEffect可能更好。

有时可以看到在旧的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 hooks: not magic, just arrays，以更好地了解钩子幕后发生的事情。它有助于解释它。

Answer 2

您可以尝试使用useEffect，只要有更新，它就会提供更新状态。

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