如何在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>)
});

希望能帮助到你