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>));

<强>演示：

＆＃13;

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
);

＆＃13;

<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>

＆＃13;

Answer 3

问题，如@rafahoro explained，它表明每个对象都包含一个唯一的属性，并且具有该值的实际对象位于该属性内。

如果可以，请更改API，因此响应将是简单的对象。其他选项是从每个对象中提取值，或者如果对象中的属性是增量的（0,1,2就像示例一样），您可以使用以下方法将其转换为对象：

将所有对象合并为一个，将数组扩展到Object#assign
添加长度属性
使用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>

如何在React Redux

3 个答案: