@Vital-jan

Не работает setState при создании компонентов в цикле. Почему?

Вариант 1. В таком варианте все отлично работает:
render() {
        return (
            <div className="circle" ref={this.ref} >
                <Cloud img={`/img/clouds/c01.png`} key={1} style={this.state.clouds[0]} />
                <Cloud img={`/img/clouds/c02.png`} key={2} style={this.state.clouds[1]} />
                <Cloud img={`/img/clouds/c03.png`} key={3} style={this.state.clouds[2]} />
                <Cloud img={`/img/clouds/c04.png`} key={4} style={this.state.clouds[3]} />
                <Cloud img={`/img/clouds/c05.png`} key={5} style={this.state.clouds[4]} />
            </div>
        );
    }


Вариант 2.
Пытаюсь сделать т.самое через цикл (компонентов Cloud может быть несколько десятков):
render() {
        return (
            <div className="circle" ref={this.ref} >
                 {this.cloudsComponents}
            </div>
        );
    }


const cloudsCount = 35;
createCloudsComponents() { // clouds components array returns
let cloudsComponentsArr = [];
for (let n = 0; n < cloudsCount; n++) {
let fileID = n < 9 ? '0' + (n + 1) : n + 1;
cloudsComponentsArr.push();
}
return cloudsComponentsArr;
}
this.cloudsComponents = this.createCloudsComponents();

this.setState({clouds: cloudsState}); - в первом варианте приводит к ожидаемым результатам - меняется state и выполняется render. Во втором случае state меняется, но render не выполняется.
Подскажите, в чем может быть причина.
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы