React - 状态数据现在显示在渲染中答案

【问题标题】：React - State data now showing in renderReact - 状态数据现在显示在渲染中
【发布时间】：2017-06-06 12:50:39
【问题描述】：

它似乎正在根据控制台日志更新状态数组。我可能错过了有关渲染如何与处理程序或生命周期本身一起工作的内容（抱歉仍在学习 React）。我是否应该将其发送到另一个组件，然后在我的页面上呈现该自定义组件？这是简化的代码。

  handleRowSelect = (row, isSelected, e) => {
console.log("MYROW::", row);
console.log("MYSTATEROW1::", this.state.selected)
this.setState({ selected: this.state.selected.concat([row]) }, () => {
  console.log("MYSTATEROW2::", this.state.selected[0].ridername);
});
}


 render() {
   return (
     <h4>{this.state.selected[0].ridername}></h4>
    )
  }

当我只是添加一个元素（不是数组）时，我在更新元素的状态时没有任何问题，基本上是从无到有。现在我连接到我的数组中，我猜我的生命周期不会让我在页面第一次加载时解决数组中的 [0] 索引？我确定我在这个 DOM（虚拟 DOM）生命周期的东西中遗漏了一些订单操作。这一切对我来说都很新鲜。在添加状态数组对象时如何处理它们（显然从什么都没有开始）。

【问题讨论】：

标签： reactjs dom rendering state virtual-dom

【解决方案1】：

看来我需要对地图功能友好。我现在可以使用它返回东西。说得通。

 <div>{this.state.selected.map((selected, index) => (
            <p key={index}>{selected.ridername}</p>
          ))}</div>

感谢这个参考，它让我进入了我正在做的事情。

http://www.hackingwithreact.com/read/1/13/rendering-an-array-of-data-with-map-and-jsx

【讨论】：

添加key 也：<p key={index}>{selected.ridername}</p> 而不是<p>{selected.ridername}</p>
@AbdennourTOUMI 是的，先生！我已经在使用该索引了。我会更新我的答案。感谢您的跟进。