Почему мой компонент не перерисовывается после изменения состояний?

Question

У меня есть компонент ul, и я хочу переопределить все дочерние элементы li, когда я выполню запрос ajax.После выполнения запроса ajax я передаю response.data в состояние.Я могу console.log состояние и увидеть, что данные изменились, однако дети никогда не перерисовывают.

export class Tiles extends React.Component {
    constructor() {
        super();
        this.state = {
            items: []
        };

         this.itemList = this.state.items.map((items)=>{
            return <ModalTest key={item.id} items={items}/>
        });
    }



    //This is the local fake data standing in for the real DB
    componentDidMount() {
        axios.get('/tiles/')
            .then((res)=>{
                console.log(res.data);
                this.setState({items:res.data});
            });
    }

    render() {
        return (
            <ul className="tiles-ul">
                {this.itemList}
            </ul>
        );
    }
}

Answer 1

Поместите свой код представления списка плиток в рендер или собственным методом.

export class Tiles extends React.Component {
    constructor() {
        super();
        this.state = {
            items: []
        };

    }

    componentDidMount() {
        axios.get('/tiles/')
            .then((res)=>{
                console.log(res.data);
                this.setState({items:res.data});
            });
    }

    displayItemList() {
        return this.state.items.map((items)=>{
            return <ModalTest key={item.id} items={items}/>
        });
     }

    render() {
        return (
            <ul className="tiles-ul">
                {this.displayItemList() }
            </ul>
        );
    }
}

Answer 2

Функция constructor запускается только один раз. Он не запускается после каждого state обновления. Это означает, что код

    this.itemList = this.state.items.map((items)=>{
        return <ModalTest key={item.id} items={items}/>
    });

запускается только один раз, когда state.items является пустым массивом. Так что this.itemList всегда будет пустым в вашем случае.

Чтобы отобразить список элементов при каждом обновлении, вы можете рассмотреть возможность создания массива в методе render, поскольку метод render запускается при каждом обновлении state.

renderItemList = () => {
    return this.state.items.map((items)=>{
       return <ModalTest key={item.id} items={items}/>
    });
}
render() {
    return (
       <ul className="tiles-ul">
          {this.renderItemList()}
       </ul>
    );
}