Почему мой this.setState не обновляет массив
я что-то упускаю? Я использую стиль es6 для добавления в пустой массив в this.state, но ничего не переводится в состояние.
Я должен получить два внутри массива, но после console.infoging ничего не отображается. и мой экран не перерисовывается, поскольку coponentDidUpdate не запущен.
class HomeModal extends Component {
constructor(props) {
super(props);
this.state = {
specificList: []
};
this.updateState = this.updateState.bind(this);
}
componentWillMount() {
this.updateState();
}
componentDidUpdate() {
console.info("after update: ", this.state.specificList);
}
updateState = () => {
this.props.completeList.forEach(index => {
index.list.forEach(innerArr => {
if (innerArr.muscleGroup === this.props.selectedBodyPart) {
console.info("test: ", innerArr);
this.setState({
specificList: [...this.state.specificList, innerArr.title]
});
}
});
console.info("after each loop: ", this.state.specificList);
});
};// console.info results
06:22:48: test: Object {
06:22:48: "muscleGroup": "Chest",
06:22:48: "title": "Barbell Bench Press",
06:22:48: }
06:22:48: after each loop: Array []
06:22:48: test: Object {
06:22:48: "muscleGroup": "Chest",
06:22:48: "title": "Barbell Bench Press",
06:22:48: }
06:22:48: after each loop: Array []
06:22:48: after each loop: Array []
6:08:04: Object { // what innerArr the object looks like
06:08:04: "muscleGroup": "Chest",
06:08:04: "title": "Barbell Bench Press",
06:08:04: }
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Попробуйте записать вывод с помощью обратного вызова setState, например:
this.setState({
specificList: [...this.state.specificList, innerArr.title]
}, () => {
console.info("after each loop: ", this.state.specificList);
});
Небольшие заметки о .setState() от документы:
React may batch multiple
setState()calls into a single update for performance.Because
this.propsandthis.statemay be updated asynchronously, you should not rely on their values for calculating the next state.
Я бы просто использовал другой объект в начале цикла (копирование из текущего состояния), изменил бы эту переменную в цикле, а затем сделал бы один .setState() в самом конце, после того, как все ваши циклы будут выполнены.
setState - это асинхронный. Это означает, что значение значений состояния не обновляется сразу.
Вы просматриваете серию значений и устанавливаете состояние specificList на конкатенацию текущего значения specificList плюс один элемент из массива.
Итак, если бы specificList был ['a', 'b', 'c'], а массив, который вы перебираете, был [1, 2, 3], то вы бы по существу вызывали:
setState({ specificList: ['a', 'b', 'c', 1] })
setState({ specificList: ['a', 'b', 'c', 2] })
setState({ specificList: ['a', 'b', 'c', 3] })
Вы можете увидеть, как все значения массива, кроме последнего, не учитываются.
Один из способов исправить это - передать функцию setState вместо значения. Это позволит вам работать с асинхронным поведением setState:
updateState = () => {
this.props.completeList.forEach(index => {
index.list.forEach(innerArr => {
if (innerArr.muscleGroup === this.props.selectedBodyPart) {
console.info("test: ", innerArr);
this.setState(({ specificList } => ({
specificList: [...specificList, innerArr.title]
}));
}
});
});
};
Лучше всего вызвать setState после того, как вы пройдете оба цикла. Например, вы можете сделать что-то вроде этого:
updateState = () => {
let temp = this.state.specificList;
this.props.completeList.forEach(index => {
index.list.forEach(innerArr => {
if (innerArr.muscleGroup === this.props.selectedBodyPart) {
console.info("test: ", innerArr);
temp.push(innerArr.title);
}
});
console.info("after each loop: ", temp)
});
this.setState({ specificList: temp });
}