React主组件通过迭代渲染子组件失败，点击添加无展示且控制台无报错

• 核心错误出在insertItem方法中对数组push方法的误用：JavaScript 中Array.push()的返回值是修改后数组的长度，而非修改后的数组本身。你的代码中将push的返回值赋值给list，导致state.items从数组类型被错误覆盖为数字类型。
• 渲染阶段调用this.state.items.map()时，数字类型不存在map方法，就会触发你后续遇到的类型报错，点击Add后条目不展示也是因为items已经不是可遍历的数组结构。
• 直接修改原state中的state.items不符合React不可变数据的开发规范，容易引发不可预期的状态问题。

修改App.js中的insertItem方法，替换成符合不可变数据规范的数组操作写法：

insertItem() {
  if (this.state.textInput !== "") {
    this.setState((state) => {
      // 基于原数组拷贝生成新数组，追加新输入的内容
      const list = [...state.items, state.textInput];
      return {
        items: list,
        textInput: ""
      };
    });
  }
}

额外建议：给遍历渲染的Item组件加上key属性，避免React抛出缺失key的警告：

{this.state.items.map((item, idx) => {
  return <Item key={idx} name={item} removeItem={this.deleteItem.bind(this, idx)} />;
})}

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