javascript - 在React JS中显示对象的数组列表

Question

嗨，我在 React js 中有这个对象列表数组，但我不知道如何在渲染 View 中显示。任何人都可以提供如何做到这一点的想法吗？

Post:{
  Store1: [
     0:{Id:"0001", Business:"Ministop"}
   ]
  Store2: [{
     0:{Id:"0002", Business:"Grocery Store"}
  }]
  Store3: [
     0:{Id:"0003", Business:"Seven Eleven"}
  ]
  Store4: [
     0:{Id:"0004", Business:"Big Store"},
     1:{Id:"0005", Business:"Medium Store"}
  ]
}

这是示例输出:

**Store 1**
   **Id      Business**
   0001    Ministop
**Store 2**
   **Id      Business**
   0002    Grocery Store
**Store 3**
   **Id      Business**
   0003    Seven Eleven
**Store 4**
   **Id      Business**
   0004    Big Store
   0005    Medium Store

我有这段代码，但出现错误 this.state.post.map 不是函数

render() {
   const groupList = this.state.post.map((data, index) => {
       return  (
           <div key={index}>
              <div>{data}</div>
           </div>
       )
   });

   return (
     <div>{groupList}</div>
   )
} 

谢谢

Answer 1

这就是您映射它的方式。只需使用 this.state.post 更改帖子

const post = {
  Store1: [
    { Id: '0001', Business: 'Ministop' }
  ],
  Store2: [
    { Id: '0002', Business: 'Grocery Store' }
  ],
  Store3: [
    { Id: '0003', Business: 'Seven Eleven' }
  ],
  Store4: [
    { Id: '0004', Business: 'Big Store' },
    { Id: '0005', Business: 'Medium Store' }
  ]
};

console.log(Object.keys(post).reduce((acccumilator, iterator) => {
  return [...acccumilator, ...post[iterator]];
}, []));

/*
  Object.keys(this.state.post).reduce((acccumilator, iterator) => {
    return [...acccumilator, ...post[iterator]];
  }, []).map(data => {
    return  (
           <div key={data.id}>
              <div>{data.Business}</div>
           </div>
       )
  })
*/