Question

在下面的示例中，我有一个要更新的元素（水果）数组，并使用更新后的数组执行其他操作（在此特定情况下，保存更新后的列表）。我的理解是关于重新渲染状态将更新的信息，但是这里没有。或者状态更新和我的操作之间存在延迟。

在addFruit函数中，我看到立即添加了“ Peach”，但是saveFruits函数中的控制台仍显示状态fruit保持不变。我该如何更新才能立即使用。（我知道在这种情况下，我可以将newFruits变量传递给saveFruits进行更新，但我也需要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.log newFruits进行了更改，那么它将更准确地显示正在发生的事情。

编辑：{@ {1}}最好还是使用@Atul的建议。

有时它有助于可视化在旧的React类中是如何完成的。在旧的React类中，等效项是这样的（实际上在某种程度上不是很接近，但足以说明问题）（更多信息：https://reactjs.org/docs/hooks-state.html）

useEffect

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>的setState确实被调用，但是console.log在状态/渲染更改发生之前发生，因此fruits仍指的是之前的状态。

我强烈建议您阅读React hooks: not magic, just arrays，以更好地了解钩子背后的情况。它有助于解释很多。

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

2 个答案: