Question

我有一个JSON API，它响应单个记录的数据结构，并在记录中嵌套了一组关联。 api响应的一个例子如下：

12,345
12,345.
1,234.5

我正在尝试将“bars”节点映射到“paragraph”html标签的反应列表，但我没有成功。我尝试使用“Object.keys.map”，如here和here所示，但我仍然无法正确进行数据转换。

我很反应/ js所以不确定如何实现这一点。

Answer 1

// get the <p> virtual DOM element
const { p } = React.DOM


// Your data mapped into the <p> element
// ps :: [ React.DOM ]
const ps = YourObj.bars.map((b, i) => p({key: i}, b.name))
//~> [ <p>bar1</p>, <p>bar2</p>, <p>bar3</p> ]

现在，您可以随时随地使用ps。

Answer 2

响应中的

bars是数组 - 直接迭代它。数组提供了map方法。

render() {
    return (
        <div>
            {response.bars.map((item, idx) => (
                <p key={idx}>{item.name}</p>
            ))}
        </div>
    )
}

注意：response是从API

收到的数据

Answer 3

想象一下，您的JSON数据已保存到名为record的属性。

const RecordItem = ({
  record
}) => (
  <div>
    {record.bars.map((bar, index) => (
      <p key={index}>{bar.name}</p>
    )}
  </div>
)

// Then, put this wherever:
<RecordItem record={record} />

应该做的伎俩！显然，根据您的需要进行修改。

映射ReactJS中嵌套数组对象的值

3 个答案: