在React中使用map()渲染列表时，列表项为什么全部显示在同一行？

问题根源 #

你操作列表状态的逻辑错误，生成了二维数组导致渲染异常：
你当前的addDoggo方法代码如下：

addDoggo = () => {
  const updatedList = [...this.state.list];
  this.setState({list: [updatedList.concat(this.state.breed)]});
}

• updatedList是原列表的浅拷贝，调用updatedList.concat(this.state.breed)后会得到新增了当前犬种的新一维数组
• 你额外在外层套了一层[]，相当于把这个新数组作为唯一元素塞进了外层数组，最终this.state.list的结构是[[犬种1, 犬种2, 犬种3]]，而非预期的[犬种1, 犬种2, 犬种3]
• 调用map遍历的时候只会输出1个<li>元素，所有犬种名称都集中在同一个<li>内，自然会显示在同一行。

修复方案 #

修改addDoggo方法即可，以下两种实现二选一：

方案1：使用concat直接生成新数组 #

addDoggo = () => {
  this.setState({list: this.state.list.concat(this.state.breed)});
}

方案2：使用扩展运算符拼接新元素 #

addDoggo = () => {
  this.setState({list: [...this.state.list, this.state.breed]});
}

修改后list会保持一维数组结构，map遍历时每个犬种名称都会单独生成一个<li>元素，即可正常分行展示。

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