ReactJS - setState работает странным образом - PullRequest
Новая
       9

ReactJS - setState работает странным образом

0 голосов
/ 12 марта 2019

Я пытаюсь добавить вещи в список в виде массива состояний.Однако, с моим текущим кодом, первый элемент не добавляет себя должным образом.

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.Любые идеи относительно того, что вызывает это?

Ответы [ 2 ]

2 голосов
/ 12 марта 2019

Каждый доступ к this.state.list должен быть заменен на list.this.state.list доступ к потенциально старому состоянию.Весь смысл передачи обратного вызова состоит в том, что вы можете получить доступ к текущему состоянию, переданному в качестве аргумента.Вы делаете это правильно для items, но не для list.

Вы также должны return {total: sum} из обратного вызова setState вместо вызова 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(); 
 }
1 голос
/ 12 марта 2019

Помните, что 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();
    } );
  }
...