0

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

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;

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

2 ответа 2

1

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

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

  this.setState({
    board
  })
}

0

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.