如何在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>