如何在 React 中顯示物件數組？

如何在 React 中顯示物件陣列

在 React 中，顯示物件陣列需要一個映射過程將陣列轉換為可見元素。

將陣列對應到渲染項目

要渲染物件數組，您可以使用 .map() 函數。此函數採用接受單一陣列元素作為輸入的回呼函數。

選項 1：在變數中儲存映射項目

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }</code>

這裡，listItems 變數儲存映射的元素，然後在

中呈現。

選項2：在Return 中直接對應

或者，您可以消除對中間變數：

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }</code>

在此變體中，在return 語句中直接呼叫映射函數。

唯一識別符的鍵

當渲染數組時，必須為每個項目提供唯一的鍵。在這兩個選項中，都會為每個渲染元素添加一個鍵，以優化渲染效能並允許高效更新。

以上是如何在 React 中顯示物件數組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！