ReactJS - setState 以一种奇怪的方式工作答案

【问题标题】：ReactJS - setState working in a weird wayReactJS - setState 以一种奇怪的方式工作
【发布时间】：2019-08-03 09:04:02
【问题描述】：

我正在尝试以状态数组的形式将内容添加到列表中。但是，使用我当前的代码，第一项无法正确添加。

export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      total: 0.00,
      ...
    }
  }

  //some unimportant code here

  addToList = item => {
    this.setState({list: [...this.state.list, item]});

    //This method call for a method that gets the total price of all the items
    this.getTotal(); 
  }

  //this method works fine, except with the first element
  getTotal() {
    this.setState(({sum= 0.0, items, list}) => {
      items.forEach(element => {
        if(this.state.list.length !== 0.0) {
          if(this.state.list.includes(element.name)) {
            sum += parseFloat(element.price);
          }
        }
      });
      this.setState({total: sum});
    });
  }
}

当我console.log list 状态时，我得到第一个项目的空数组，然后项目延迟一个。因此，如果我添加项目 A 并查看控制台，我什么也看不到。当我添加项目B 并查看控制台时，我看到Array 和项目A。关于造成这种情况的任何想法？

【问题讨论】：

你想在这里实现什么？我可能不会将方法传递给 setState？然后在该方法中调用 setState？
@dezman getTotal 方法不是我遇到的问题，我只是添加了它，以便您更好地了解 addToList 方法包含的内容。

标签： javascript reactjs state setstate

【解决方案1】：

对this.state.list 的每次访问都应替换为list。 this.state.list 访问可能是旧状态。传递回调的全部意义在于您可以访问作为参数传递的当前状态。您对items 执行此操作是正确的，但对于list 却不是。

您还应该从setState 回调中return {total: sum} 而不是调用this.setState：

  getTotal() {
    this.setState(({items, list}) => {
      const sum = 0;
      items.forEach(element => {
        if(list.includes(element.name)) {
          sum += parseFloat(element.price);
        }
      });
      return {total: sum};
    });
  }

出于同样的原因，您应该在addToList 中使用回调函数：

 addToList = item => {
   this.setState(({list}) => ({list: [...list, item]}));
   this.getTotal(); 
 }

【讨论】：

【解决方案2】：

请记住，setState 是异步的，所以如果你想检查更新的列表，你可以为 setState 添加一个回调：

 addToList = item => {
    this.setState( {list: [...this.state.list, item]}, () =>{ 
     // So if you make anything here, you are sure that the state was updated successfully 
    console.log( this.state.list );
    this.getTotal();
    } );
  }

【讨论】：