使用嵌套的 map() 反应类组件以显示数据答案

【问题标题】：React class component with nested map() to display data使用嵌套的 map() 反应类组件以显示数据
【发布时间】：2019-10-04 10:58:43
【问题描述】：

嵌套map()方法的类组件中如何显示数据？

下面是数据结构。

data.js

const items =
{
    "label": "DTR-01",
    "row": [
        {
            "level": 1,
            "locations": [
                {
                    "name": "DTR-01-01",
                    "stock": [
                        {
                            "product": "Battery Drill",
                            "qty": 100,
                            "replenishment": "slow"
                        }
                    ]
                }
            ]
        },
        {
            "level": 2,
            "locations": [
                {
                    "name": "DTR-01-02",
                    "stock": []
                },
                {
                    "name": "DTR-02-02",
                    "stock": [
                        {
                            "product": "Angle Grinder",
                            "qty": 3,
                            "replenishment": "fast"
                        }
                    ]
                }
            ]
        },
        {
            "level": 3,
            "locations": [
                {
                    "name": "DTR-01-03",
                    "stock": [
                        {
                            "product": "Skill Saw",
                            "qty": 2,
                            "replenishment": "standard"
                        }
                    ]
                },
                {
                    "name": "DTR-01-04",
                    "stock": [
                        {
                            "product": "Hammer Drill",
                            "qty": 10,
                            "replenishment": "standard"
                        }
                    ]
                }
            ]
        }
    ]
};

export default items;

设置当前返回对象的组件，数量为 3。

下面的类组件。

LocalData.js

import React, {Component} from 'react';
import items from '../data/data';

class LocalData extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: items
        };
    }

    render() {
        const {items} = this.state;
        return (
            <div>
                {
                    Object.keys(items.row).map(level => {
                        return (<div key={level}>{level}</div>)
                    })
                }
            </div>
        );
    }
}

export default LocalData;

我需要嵌套其他 map() 方法来显示组件中的数据吗？我曾尝试嵌套 map() 方法，但最终出现错误。

【问题讨论】：

记住 map 仅适用于数组。您可能需要选择下一个属性，该属性是要映射到它的数组。喜欢rows.map(row => row.locations.map(location =>等
试试这个Object.keys(items.row).map((level, index) => (<div key={index}>{level}</div>))

标签： javascript reactjs

【解决方案1】：

试试我的代码：


    const isArray = arr => !!(arr && Array.isArray(arr));

    const MyComponent = ({ collection }) =>
      Array.isArray(collection) ? (
        <div>
          {collection.map((item, index) =>
            item && isArray(item.locations) ? (
              <div key={index}>
                {item.level}
                {item.locations.map((item, index) => (
                  <div key={index}>
                    {item.name}
                    {isArray(item.stock) && (
                        <div>
                        {item.stock.map((stock, index) => (
                          <div key={index}>
                            {stock.product}
                            <MyComponent collection={item.locations} />
                          </div>
                        ))}
                        </div>
                    )}
                  </div>
                ))}
              </div>
            ) : (
              <div key={index}> {item && (item.level || item.name)} </div>
            )
          )}
        </div>
      ) : null;

    render() {
        const { items } = this.state;
        return (
          <div>
            {
              <MyComponent collection={items.row} />
            }
          </div>
        );
    }

【讨论】：

试用您的代码，{item.stock.map((stock, index) => ( 行抛出错误，**Parsing error: Unexpected token, expected "," **.您是否在类组件中尝试过这个？谢谢
我将上述注释中的代码包装在一个 div 中，所有这些都可以完美运行，感谢代码 sn-p。我的 IDE 突出显示了 isArray 并将其简化为：const isArray = arr => !!(arr && Array.isArray(arr)); 再次感谢。

【解决方案2】：

此处添加了简化版本，无需检查 isArray。

Stock.js

import React from 'react';
import items from '../data/data';


const Stock = () => {
    return (
        <div className="container">
            {items.row.map((value, index) => (
                <div key={index}>
                    <div>{value.level}</div>
                    {value.locations.map((val, idx) => (
                        <div key={idx}>
                            <div>{val.name}</div>
                            {val.stock.map((v, i) => (
                                <p key={i}>Product: {v.product} Qty:{v.qty}</p>
                            ))}
                        </div>
                    ))}
                    <hr/>
                </div>
            ))}
        </div>
    );
};

export default Stock;

【讨论】：