Вопрос:
У меня есть функция, которая генерирует Timerist для меня. Когда он начинает визуализацию, метод должен вызываться и отображаться состояние. Он отображается, но консоль бросает несколько ошибок:
setState(…): Cannot update during an existing state transition (such as within ‘render’ or another component constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to ‘componentWillMount’.
Мой код выглядит так:
import React, { Component } from ‘react’; export default class Timeline extends Component { constructor(props) { super(); this.state = { timeList: ‘aa’ }; } generateTimelineArray(start = 1499162400, end = 1499248800, step = 60) { let arr =[]; for(let i = start; i <= end;i+=step) { const date = new Date(i); const hours = date.getHours(); const mins = date.getMinutes(); arr[i] = { time: hours + «:» + mins, hour: hours, minutes: mins }; } this.setState({ timeList: ‘bb’}); this.setState({ timeList: ‘bb’}); } render() { {this.generateTimelineArray()} return ( <div className=»App» > {this.state.timeList} </div> ); } }
ГенерацияTimelineArray выполняет цикл с указанными аргументами и создает массив. Впоследствии я хочу отобразить в другой компонент, например, цели, я изменил его на строку.
В чем причина ошибки и как это должно быть исправлено?
Лучший ответ:
Вы не можете вызвать this.setState в цикле render, точно так же, как сообщила вам об ошибке. Почему бы не вместо этого вызвать generateTimelineArray в function жизненного цикла componentWillReceiveProps предоставленной React? Или, возможно, во время функции componentWillMount если вы не видите изменения состояния.
Это лучшее место, чтобы “реагировать” на изменения состояния и как таковые строить новое состояние компонента. В конечном итоге вы попадете в бесконечный цикл, потому что вы будете постоянно выполнять рендеринг и сброс состояния компонента
Документация Facebook о жизненном цикле React – componentWillReceiveProps
