React组件更新state后为何未重新渲染？

嘿，我一眼就瞅出问题所在了——你把生成子组件列表的逻辑放在constructor里了，这就导致this.itemList只在组件第一次初始化时生成一次，后续哪怕你用setState更新了items，这个变量也不会重新计算，所以render里始终渲染的是最初空数组对应的内容，子组件当然不会更新啦！

给你修正后的代码，核心就是把列表渲染逻辑移到render方法内部：

export class Tiles extends React.Component {
  constructor() {
    super();
    this.state = { items: [] };
    // 移除这里提前生成itemList的代码
  }

  // 本地模拟请求逻辑不变
  componentDidMount() {
    axios.get('/tiles/')
      .then((res)=>{
        console.log(res.data);
        this.setState({items: res.data});
      });
  }

  render() {
    // 每次render时，根据最新的state重新生成子组件列表
    const itemList = this.state.items.map((item)=>{
      // 这里修正了参数名的笔误，原来的items={items}容易混淆，改成item={item}更清晰
      return <ModalTest key={item.id} item={item}/>;
    });

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

为什么这样改就能解决问题？ #

React的render方法会在组件的state或props发生变化时自动重新执行。把生成子组件的逻辑放在render里，每次this.state.items更新后，render都会重新运行，根据最新的数据生成新的ModalTest组件列表，自然就能触发子组件的重新渲染了。

另外还有两个小细节要注意：

• 你原来的map回调里写的是(items)=>，然后传递items={items}，这明显是笔误，改成(item)=>和item={item}才能正确把单个数据传给子组件。
• 确保item.id是每个列表项的唯一标识，这是React列表渲染中key属性的要求，能避免不必要的渲染错误，提升性能。

内容的提问来源于stack exchange，提问作者user4747724