如何在React Redux中呈現JSON數據數組

Question

我正在學習React，並遇到了一個稍微棘手的問題。 從我的API調用中，我得到一個包含對象數組的響應。 我想在列表中顯示它。 為了了解響應的外觀，這是一個示例（它是JSON數組）

data = [
  {0: {name: "tom"}},
  {1: {name: "Pope"}},
  {2: {name: "jack"}}
 ];

要在我的容器中呈現此信息，請嘗試如下操作：

render() {
  const items = data.map((d) => <li>{d.name}</li>);

  return (
    <div>
      <ul>
        {items}
      </ul>
    </div>
  )
}

但這沒有打印任何內容。 我什至沒有任何錯誤。 我認為我解析響應的方式是錯誤的。

解決我的棘手問題的正確方法是什么？

Answer 1

在

const items = data.map((d) => <li>{d.name}</li>);

您的d是對象： {0: {name: "tom"} ，而不僅僅是{name: "tom"}

因此，您將需要首先獲取每個此類對象的值。

這（雖然可能不是最佳的）將完成這項工作：

const items =data.map((d) => {
  const val= Object.values(d)[0];
  return (<li>{val.name}</li>)
});

希望能幫助到你

Answer 2

您的錯誤在於提取數據的方式。 引用d指向包含0、1、2屬性的對象，該值是包含name屬性的另一個對象。

根據對象的模式，可以使用當前索引獲取name對象：

const items = data.map((d,i) => (<li>{d[i].name}</li>));

演示：

 const data = [ {0: {name: "tom"}}, {1: {name: "Pope"}}, {2: {name: "jack"}} ]; class Demo extends React.Component { render() { const items = this.props.data.map((d,i) => (<li>{d[i].name}</li>)); return ( <div> <ul> {items} </ul> </div> ) } } ReactDOM.render( <Demo data={data} />, demo ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="demo"></div> 

Answer 3

正如@rafahoro解釋的那樣 ，問題在於每個對象都包含一個唯一的屬性，而帶有該值的實際對象位於該屬性內。

如果可以，請更改API，因此響應將是簡單的對象。 其他選項是從每個對象提取值，或者ff如果對象中的屬性是遞增的（如示例中的0、1、2），則可以使用以下方式將其轉換為對象：

1. 通過將數組擴展到Object＃assign中，將所有對象合並為一個
2. 添加長度屬性

3. 使用Array＃from轉換回數組

   const arr = Array.from（Object.assign（{length：data.length}，... data））;

演示：

 const data = [ {0: {name: "tom"}}, {1: {name: "Pope"}}, {2: {name: "jack"}} ]; const arr = Array.from(Object.assign({ length: data.length }, ...data)); class Demo extends React.Component { render() { const items = this.props.data.map((d) => <li>{d.name}</li>); return ( <div> <ul> {items} </ul> </div> ) } } ReactDOM.render( <Demo data={arr} />, demo ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="demo"></div>