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

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

Answer 2

它对 console.log 不准确，fruits因为对 的引用fruits仍然指的是fruits您调用之前的setFruits。

如果我们 console.lognewFruits发生了变化，它会更准确地描述正在发生的事情。

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>

我们遇到了上面同样的问题，但可能更清楚一些。setStatefruits确实被调用，但 console.log 发生在状态/渲染更改发生之前，因此this.state.fruits仍然引用之前的状态。

我强烈建议阅读React hooks：不是魔法，只是数组，以便更好地了解 hooks 幕后发生的事情。它有助于解释很多。