ReactJS点击按钮添加数组元素后列表不更新问题求助

嘿，我一眼就瞅出问题啦！你页面列表没更新显示的原因很简单——你往数组里加的是字符串，但原来的数组元素都是带name属性的对象，导致渲染的时候拿不到item.name，自然看不到新内容～

问题根源分析 #

你看，原来的state.item里每个元素都是{ name: 'Item X' }这种结构，但在addItem方法里，你写的是：

item.push("New Item");

这就把一个字符串塞进数组了。当你在map里渲染<li name={item.name}> {item.name} </li>时，字符串是没有name属性的，所以item.name是undefined，页面上就显示空的<li>，看起来像没更新，但其实你的state已经变了（alert里能看到数组确实新增了元素）。

修复步骤 #

解决办法很简单，把添加的内容改成和原数组一样的对象结构就行：

addItem =() => {
  let item = [...this.state.item];
  // 把字符串改成带name属性的对象
  item.push({ name: "New Item" });
  this.setState ({ item: item });
}

另外要夸一下你用[...this.state.item]复制数组的做法，这是对的——React里不能直接修改state，必须先复制一份再修改，然后通过setState更新，这点你做得很棒！

完整修改后的代码 #

import React, {Component} from 'react';
import './Amit.css';
class Item extends Component {
  state = {
    item : [
      { name:'Item 1' },
      { name:'Item 2' },
      { name:'Item 3' },
      { name:'Item 4' }
    ]
  }
  addItem =() => {
    let item = [...this.state.item];
    // 修改这里，添加对象而不是字符串
    item.push({ name: "New Item" });
    this.setState ({ item: item });
  }
  render(){
    return(
      <div className="Item-block">
        <div className="item-heading">
          <h4 className="item-heading-text"> ITEM HEADING </h4>
        </div>
        <div className="item-add">
          <button onClick={this.addItem}> ADD NEW ITEM </button>
        </div>
        <div className="item-list">
          <ul>
            { this.state.item.map((item, index)=> {
              // 给li加唯一key属性，提升React渲染效率
              return <li key={index} name={item.name}> {item.name} </li>
            }) }
          </ul>
        </div>
      </div>
    );
  }
}
export default Item;

顺便提个小建议：React渲染列表时，每个元素最好加个唯一的key属性，我在代码里加了key={index}（如果以后有业务唯一id的话，用id替代index会更稳妥），这样React能更高效地更新DOM。

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