时间戳

首页 > 解决方案 > 如何渲染嵌套数组？

reactjs - 如何渲染嵌套数组？

问题描述

我收到来自端点的响应，它是：

[[{"1":"91"}],[{"1":"1"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}]]

我获取了它们并得到了结果，但我无法渲染它们。这是我一直在尝试的：

render() {
        const {count} = this.state;
        return (
            <div>
                {count.count && count.count.map(item => (
                    item.value.map(data => (
                        data.value.map(x => (
                            <p>{x.value}</p>
                        ))
                    ))
                ))}
            </div>
        )
    }

我希望输出是 json 响应中显示的所有数字。前任。91 1 0 0 0 等

标签： reactjs

解决方案

首先，您尝试迭代的数组的结构就像一个数组数组，其中包含对象。因此，首先开始迭代第一个和第二个数组，然后迭代其中的对象。Object.keys可以用于那个。

您可以像下面这样访问它，

...
    <div>
      {count &&
        count.length > 0 &&
        count.map(
          item =>
            item.length > 0 &&
            item.map(
              el =>
                Object.keys(el).length > 0 &&
                Object.keys(el).map(val => <p>{el[val]}</p>)
            )
        )}
    </div>
...

Codesandbox 演示在这里

Stackblitz 演示在这里

推荐阅读