@AlexNoch

Не рендерится новый компонент, созданный динамически?

Изучаю реакт. Суть такая, Если ручками прописать Компонент со всеми параметрами в состоянии, он рендерится. Если я отправляю Ajax запрос на сервер, мне приходит ответ, с новым обьектом, и я добавляю его в состояние , этот-же Компонент уже не рендерится. Значит ручками он рендериться, а когда приходит с сервера не рендерится. Я так понимаю, проблема в том, что не срабатывает рендер на отрисовку новых компонентов?

import React, {Component} from 'react';
import Circle from './Circle';
let xhr;

class NewApp extends Component{
    constructor(props){
        super(props);
        this.state={
            arrays:[<Circle key='99' bgColor='red' />]
        }                                 
       
       this.sob = this.sob.bind(this);
       this.req = this.req.bind(this);
   
    }
   // Запрос
    sob(){
        xhr = new XMLHttpRequest();
        xhr.open("GET", "http://localhost:3001", true);
        xhr.send();
        xhr.addEventListener("readystatechange",this.req, false);
    }
    // Обработка запроса установка состояния с новыми данными
    req(){
        if(xhr.readyState === 4 && xhr.status === 200){
            var response = JSON.parse(xhr.responseText);
            this.state.arrays.push(<Circle key={this.state.arrays.length} bgColor={response.color} />)
        }
    } 
    render(){
        return[
            <div>
                <div key="9324"><button key={77} onClick={this.sob}>Ещё инфа</button></div>
                {this.state.arrays}
            </div>
        ]
    }         
}
export default NewApp;


И собственно точка входа
import React from "react";
import ReactDOM from "react-dom";
import NewApp from './NewApp';

ReactDOM.render(
    <NewApp />,
    document.getElementById("root")
     );
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
@AlexNoch Автор вопроса
Решение найдено. Оно заключалось в установке setState, без пуша.
req(){
        if(xhr.readyState === 4 && xhr.status === 200){
            var response = JSON.parse(xhr.responseText);
            console.log('2. Пришел ответ от сервера:', response)
            console.log('Текущее состояние state{arrays :',this.state.arrays)
            console.log('Какой ключ будет у компонента в Циркле ', this.state.arrays.length)
            this.setState((state,props)=>{
                return {arrays: [state.arrays ,<Circle key={1} bgColor={response.color} />]};
            })

        }
    }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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