Обновление стейта в цикле React

26 марта 2022, 12:20

Есть такой компонент:

export class Example extends Component {
        constructor(props) {
            super(props);
            this.state = {
                num: 81,
                board: [],
            };
        }
        componentDidMount() {
            this.create(this.state.num);
        }
        create = (num) => {
            for (let i = 0; i < num; i++) {
                let newelement = {
                    x: 1,
                    y: 2
                };
                this.setState(prevState => ({
                    board: [...prevState.board, newelement]
                }));
            }
            console.log(this.state.board);
        }

        render() {
            return (
                <div>
                </div>
            );
        }
    }
    export default Example;

В нем я после того как произойдет маунт компонента вызываю функцию, которая должна наполнить стейт-массив элементами. Я вывожу этот стейт в консоль, но она показывает что массив пуст. Что я сделал не так?

Answer 1

Можно всё сделать гораздо проще

create = (num) => { 
  let board = Array(num).fill().map(() => ({ 
    x: 1, 
    y: 2 
  })); 
 
  this.setState({ 
    board 
  }) 
}

Answer 2

Вызов setState в цикле не даёт ожидаемого результата, потому что состояние изменяется не сразу, а в определенный момент "жизненного цикла". Делать лог после цикла бесполезно - здесь состояние ещё старое.

Впрочем, если очень хочется сделать лог, то у setState есть второй коллбэк, который выполняется после мутации состояния. Можно вставить лог туда, вот только вызовов будет много.