Recharts：在条形图中循环两次时不显示

Question

我使用 Recharts 来显示我的图表。
我的数据看起来像这样：

const data = [
      {name: 'day 1', supermarket1:{strawberry:4090, apple:3740} , supermarket2:{strawberry:6498, apple:1008}, supermarket3:{strawberry:4090, apple:3740}},
      {name: 'day 2', supermarket1:{strawberry:200, apple:768} , supermarket2:{strawberry:700, apple:876}, supermarket3:{strawberry:300, apple:932}}
]

我想在条形图中循环两次以显示我的数据

我尝试在条形图中只使用一个循环，它工作得很好，但是当我想循环两次时，显示没有出现我不知道为什么

我的代码是这样的：

const SimpleBarChart = React.createClass({
    render () {
    return (
        <BarChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <CartesianGrid strokeDasharray="3 3"/>
       <XAxis dataKey="name"/>
       <YAxis/>
       {["supermarket1", "supermarket2", "supermarket3"].map((elt, index) =>{
         ["strawberry", "apple"].map((fruit, index2) =>{
         console.log(`${elt}.${fruit}`);
         return(
           <Bar
             key={index + index2}
             dataKey={`${elt}.${fruit}`}
             fill="#1f77b4"
           >
           </Bar>
         )
         })
       })}
      </BarChart>
    );
  }
})

Answer 1

解决方案是在 BarChart 外部映射两次，并在第三个数组中按需要组织数据以在 BarChart 内部使用。

const SimpleBarChart = React.createClass({
    render () {
  let keys= [];
  {["supermarket1", "supermarket2", "supermarket3"].map((elt, index) =>{
       ["strawberry", "apple"].map((fruit, index2) =>{
       keys.push(`${elt}.${fruit}`)
       })
       })}  
    return (
        <BarChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <CartesianGrid strokeDasharray="3 3"/>
       <XAxis dataKey="name"/>
       <YAxis/>

       {keys.map((key, index) =>{

       return(
       <Bar
         key={index}
         dataKey={`${key}`}
         fill="#1f77b4"
       ></Bar>
       )
       })}
      </BarChart>
    );
  }
})

demo

Recharts：在条形图中循环两次时不显示

Recharts: No display when looping twice inside the BarChart

reactjs

recharts