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

Question

[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")
     );

Comments

[WbICHA]

Изучаю реакт.

this.state.arrays.push

Можно узнать зачем вы пропустили главу работы со стейтом?

[AlexNoch]

WbICHA, Ты походу не в ту тему попал, тебе надо в раздел " особо умные " .

[WbICHA]

AlexNoch, а я смотрю юморишь ты на том же уровне, что и кодишь.

Answer 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} />]};
            })

        }
    }

Comments

[WbICHA]

Внезапно, смог сам найти ответ и ещё вернуться в тему и написать решение. За это респект. Без сарказма.

[WbICHA]

(state,props)=>{
Только зачем ты объявил пропс, если не используешь его?

arrays: [state.arrays, ...
И тут ...state.arrays.

[AlexNoch]

WbICHA, нашел в оф. документации решение, скопировал. Да, пропс мне не нужен, убрал. А строка

return {arrays: [state.arrays ,<Circle key={1} bgColor={response.color} />]}

мне нужна для сохранения текущего состояния , допустим Рецепт 1 + Новый компонент содержащий рецепт с сервера.
При следующем запросе, эта строка мне сохраняет Рецепт 1 + Рецепт 2 + Снова новый компонент с рецептом и т.д. Таким образом, я могу подгружать всё новые и новые рецепты. Конечно не идеальное решение, слишком уж странно все выглядит, но работает.

[WbICHA]

AlexNoch,

return {arrays: [...state.arrays ,<Circle key={1} bgColor={response.color} />]}

[AlexNoch]

WbICHA, Оператор распространения , да, логично и уместно . Спасибо)