reactjs - React - 状態データがレンダリングに表示されるようになりました

Question

コンソール ログに基づいて State Array を更新しているようです。レンダーがハンドラーまたはライフサイクル自体でどのように機能しているかについて、おそらく何かが欠けています（申し訳ありませんが、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) ライフサイクルでいくつかの注文操作が欠落していると確信しています。それはすべて私にとってかなり新しいものです。State Array オブジェクトが追加されたときのレンダリングをどのように処理しますか (明らかに何もない状態から始めます)。