为什么我更改状态后我的组件没有重新渲染？答案

【问题标题】：Why is my component not rerendering after I change states?为什么我更改状态后我的组件没有重新渲染？
【发布时间】：2018-05-10 19:22:26
【问题描述】：

我有一个 ul 组件，我想在完成 ajax 请求时重新渲染所有子 li。 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>
        );
    }
}

【问题讨论】：

标签： javascript reactjs rendering axios

【解决方案1】：

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>
    );
}

【讨论】：

【解决方案2】：

将你的tiles列表的展示代码放在render或者自己的方法中。

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>
        );
    }
}

【讨论】：