ReactJS — setState работает странно
Я пытаюсь добавить вещи в список в виде массива состояний. Однако с моим текущим кодом первый элемент не добавляется должным образом.
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.info состояние list, я получаю пустой массив для первого элемента, а затем элементы задерживаются на единицу. Так что, если я добавлю элемент A и посмотрю в консоль, я ничего не увижу. Когда я добавляю элемент B и смотрю на консоль, я вижу Array с элементом A. Любые идеи относительно того, что вызывает это?
@dezman Метод getTotal не тот, с которым у меня проблемы, я просто добавил его, чтобы вы лучше поняли, что содержит метод addToList.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info( this.state.list );
this.getTotal();
} );
}
Каждый доступ к 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();
}
Чего вы пытаетесь достичь здесь? Я бы, наверное, не передал метод setState? А затем вызвать setState внутри этого метода?