Javascript 使用嵌套映射（）对类组件进行反应以显示数据

如何在具有嵌套map（）方法的类组件中显示数据

下面是数据结构

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

下面是类组件

LocalData.js

import React，{Component}来自'React'；
从“../data/data”导入项目；
类LocalData扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：项目
};
}
render（）{
const{items}=this.state；
返回(
{
Object.keys（items.row）.map（级别=>{
返回（{level}）
})
}
);
}
}
导出默认本地数据；

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

请尝试我的代码：

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

常数isArray=arr=>！！（arr&&Array.isArray（arr））；
常量MyComponent=（{collection}）=>
数组.isArray（集合）？(
{collection.map（（项，索引）=>
项目和isArray（项目位置）(
{item.level}
{item.locations.map（（item，index）=>(
{item.name}
{isArray（项目库存）&(
{item.stock.map（（股票，指数）=>(
{stock.product}
))}
)}
))}
) : (
{item&&（item.level | | item.name）}
)
)}
)：null；
render（）{
const{items}=this.state；
返回(
{
}
);
}

试试我的代码：

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

常数isArray=arr=>！！（arr&&Array.isArray（arr））；
常量MyComponent=（{collection}）=>
数组.isArray（集合）？(
{collection.map（（项，索引）=>
项目和isArray（项目位置）(
{item.level}
{item.locations.map（（item，index）=>(
{item.name}
{isArray（项目库存）&(
{item.stock.map（（股票，指数）=>(
{stock.product}
))}
)}
))}
) : (
{item&&（item.level | | item.name）}
)
)}
)：null；
render（）{
const{items}=this.state；
返回(
{
}
);
}

此处添加简化版，无需检查iArray

Stock.js

从“React”导入React；
从“../data/data”导入项目；
常数股票=（）=>{
返回(
{items.row.map（（值，索引）=>(
{value.level}
{value.locations.map（（val，idx）=>(
{val.name}
{val.stock.map（（v，i）=>(
产品：{v.Product}数量：{v.Qty}
))}
))}

))}
);
};
出口默认库存；

此处添加简化版，无需检查iArray

Stock.js

从“React”导入React；
从“../data/data”导入项目；
常数股票=（）=>{
返回(
{items.row.map（（值，索引）=>(
{value.level}
{value.locations.map（（val，idx）=>(
{val.name}
{val.stock.map（（v，i）=>(
产品：{v.Product}数量：{v.Qty}
))}
))}

))}
);
};
出口默认库存；

请记住，映射仅适用于阵列。您可能需要选择下一个属性，即要映射到该属性上的数组。像

rows.map（row=>row.locations.map（location=>
etctry this
Object.keys（items.row）.map（（level，index）=>（{level}））
记住map只对数组有效。您可能需要选择下一个属性，它是要映射到它上面的数组。像
rows.map（row=>row.locations.map）（location=>
etctry this
Object.keys（items.row.map）（（level，index）=>（{level}））
尝试您的代码，带有
{item.stock.map（（stock，index）=>（
的行正在抛出一个错误，**解析错误：意外标记，预期“，”**。您是否在类组件中尝试过此操作？谢谢我将上述注释中的代码包装在一个div中，所有工作都很好，谢谢您的代码片段。我的IDE突出显示了iArray并将其简化为：
const isArray=arr=>！！（arr&&Array.isArray（arr））；
再次感谢。请尝试您的代码，代码行为
{item.stock.map(（stock，index）=>（
正在抛出一个错误，**解析错误：意外标记，预期“，”**。您在类组件中尝试过吗？谢谢我将上述注释中的代码包装在一个div中，所有工作都很好，感谢代码片段。我的IDE突出显示了isArray并将其简化为：
const isArray=arr=>（arr&&Array.is）

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


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;