ReactJS - ComponentDidMount выполняет перед визуализацией

У меня возникли проблемы с реакцией. Я использую функцию карты в рендере, и функция componentDidMount вызывается до ее завершения.ReactJS - ComponentDidMount выполняет перед визуализацией

Вот фрагмент моего кода

componentDidMount: function() { 
    console.info("didMount"); 
}, 
render: function() { 
    return React.createElement("div", null, 
      this.state.fields.map(function(field) { 
       console.info("field" + field); 
       return React.createElement("span", null, field); 
      }.bind(this))); 
}

Она печаталась "didMount" перед "поле ...". Как я могу это решить? Кажется, что карта асинхронна.

Thank's

источник

2016-02-03 William Luis Alberton

Представлены 'this.state.fields' в' componentDidMount'? –

запустите 'map' вне' React.createElement' и включите его, только внутри обратного вызова 'render' –

Есть ли у вас пример, Олег? this.state.fields содержит список реагирующих компонентов, которые я хочу добавить. Возможно ли создать div React с элементами на компонентеWillMount, а затем передать его для отображения переменной this.state.var? –

Как вы инициализации вашего this.state.fields? Если вы сделаете это в функции componentDidMount, то console.info("field" + field); никогда не будет выполняться, потому что поле/массив равно null.

Используйте параметр setState callback для запуска кода после того, как состояние было инициализировано/обновлено.

источник

2018-03-01 23:18:05 Tracy

Я использую Redux для управления состоянием. – david

Я не знаком с Redux, но вы можете добавить точку останова в строку [return React.createElement ("div", null,] и посмотреть значение this.state.fields. Я предполагаю, что она равна null или пустым, поэтому вы не получаете соответствующий вывод консоли. – Tracy

ReactJS - ComponentDidMount выполняет перед визуализацией

ответ

Смежные вопросы