如何在本机反应中嵌套 arrays 的 map object

Question

我有一个data.json文件：

{
    "category1":[
    {"name":"XYZ","price":100,"instock":true},
    {"name":"ABC","price":934,"instock":false},
    {"name":"OTR","price":945,"instock":true},
    {"name":"SLG","price":343,"instock":true},
    {"name":"KGN","price":342,"instock":true},
    {"name":"GDS","price":234,"instock":true},
    {"name":"KNL","price":934,"instock":true},
    {"name":"GLM","price":320,"instock":true},
    {"name":"DKF","price":394,"instock":false},
    {"name":"VFS","price":854,"instock":true}
    ],
    "category2":[
    {"name":"NA","price":124,"instock":true},
    {"name":"DS","price":953,"instock":true},
    {"name":"HF","price":100,"instock":true},
    {"name":"FJ","price":583,"instock":true},
    {"name":"LS","price":945,"instock":false},
    {"name":"TR","price":394,"instock":true},
    {"name":"PD","price":35,"instock":true},
    {"name":"AL","price":125,"instock":true},
    {"name":"TK","price":129,"instock":true},
    {"name":"PG","price":294,"instock":true}
    ]
}

我将所有这些数据存储在我的 redux 减速器中，然后使用挂钩存储在我的 state 中：

const [items, setItems] = useState({});
setItems(createMenuReducer.data.menu)
console.log(items);

当控制台我的items时，我得到以下 output：

{cat1: Array(10), cat2: Array(10), default: {…}}
cat1: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
cat2: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
default: {cat1: Array(10), cat2: Array(10)}
__proto__: Object

我想通过这个items map 并在屏幕上显示name和price 。

{
    createMenuReducer &&
    items?.map((item, index) => {
        return (
            <Text>item</Text>
        );
    })
}

但我收到错误： items.map is not a function 。

我知道我的映射方式是错误的，但是在映射某些东西时我总是感到困惑。 请有人解释我如何用他们的类别名称显示名称和价格，即category1和category2 。

Answer 1

The problem is that .map is a function of the array object and you are currently handling a javascript object with key pair values in your items object.

go 关于做你想做的事情的最简单方法是说

for(let key in items){
    items[key].map( item => {
       console.log(item.name + " : " + item.price);
    })
}

Answer 2

由于您不能在objects上使用Array.map ，因此您首先必须转换该数据。 Object.values在您的情况下可能很有用。 您可以使用它从object中的keys中获取所有values ，然后使用Array.reduce将 arrays 连接成一个。 这是如何完成的示例：

 const data = { "category1": [{ "name": "XYZ", "price": 100, "instock": true }, { "name": "ABC", "price": 934, "instock": false }, { "name": "OTR", "price": 945, "instock": true }, { "name": "SLG", "price": 343, "instock": true }, { "name": "KGN", "price": 342, "instock": true }, { "name": "GDS", "price": 234, "instock": true }, { "name": "KNL", "price": 934, "instock": true }, { "name": "GLM", "price": 320, "instock": true }, { "name": "DKF", "price": 394, "instock": false }, { "name": "VFS", "price": 854, "instock": true } ], "category2": [{ "name": "NA", "price": 124, "instock": true }, { "name": "DS", "price": 953, "instock": true }, { "name": "HF", "price": 100, "instock": true }, { "name": "FJ", "price": 583, "instock": true }, { "name": "LS", "price": 945, "instock": false }, { "name": "TR", "price": 394, "instock": true }, { "name": "PD", "price": 35, "instock": true }, { "name": "AL", "price": 125, "instock": true }, { "name": "TK", "price": 129, "instock": true }, { "name": "PG", "price": 294, "instock": true } ] }; const final = Object.values(data).reduce((arr, nextArr) => [...arr, ...nextArr], []); console.log(final);