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

Question

它似乎正在根据控制台日志更新状态数组。我可能遗漏了一些关于渲染器如何与处理程序或生命周期本身一起工作的东西（抱歉还在学习 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）生命周期中遗漏了一些订单操作。这对我来说都很新鲜。您如何在添加状态数组对象时处理它们的渲染（显然从什么都没有开始）。

Answer 1

看来我需要熟悉一下地图功能。我现在可以 return 使用它。说得通。

 <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

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

React - State data now showing in render

reactjs

dom

rendering

state

virtual-dom