Javascript 如何在映射函数react中返回http标记

我正在尝试建立一个动态的条形图，它有很多层次。。所以我使用map函数来生成图表。我用控制台记录var和东西，它工作正常。但是标记的返回不会呈现。我尝试使用简单的div{

Hey

}，但它也不会渲染。 这是我的密码

import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';


export const LocalBarChart =({config, data})=>{

    //data :-  [{name: 'X Axis Name', levelOneName: levelOneValue, levelTwoName: levelTwoValue} , {name: 'X Axis Name', levelOneName: levelOneValue, levelTwoName: levelTwoValue}];

    //config :-  {numberOfLevel: (1-10) , COLORS : ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']}; // 0 means full filled piechart, 0<x<50 ->liner circle

    const COLORS = config.COLORS;
    let keysArray=Object.keys(data[0]);

    return(
        <BarChart width={600} height={300} data={data}
            margin={{top: 20, right: 30, left: 20, bottom: 5}}>
            <CartesianGrid strokeDasharray="6 0"/>
            <XAxis dataKey="name"/>
            <YAxis/>
            <Tooltip/>
            <Legend />


            {  data.map((e, i) => {

                if(i===0){
                    console.log(e);
                    keysArray.map((datas,indexs)=>{
                        if(datas!=="name"){
                            console.log(indexs)
                            console.log(datas)
                            return (
                                <Bar dataKey={datas} stackId="a" fill={COLORS[indexs]} />
                            );

                        }
                    })
                }


            }) }


        {/* <Bar dataKey="pv" stackId="a" fill="#8884d8" />
       <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
       <Bar dataKey={keysArray[1]} stackId="a" fill={COLORS[0]} />    */}
        </BarChart>
    );


}

从“React”导入React；
从“recharts”导入{BarChart、Bar、XAxis、YAxis、CartesianGrid、工具提示、图例}；
export const LocalBarChart=（{config，data}）=>{
//数据：-[{name:'X轴名称'，levelOneName:levelOneValue，levelTwoName:levelTwoValue}，{name:'X轴名称'，levelOneName:levelOneValue，levelTwoName:levelTwoValue}]；
//配置：-{numberOfLevel:（1-10），颜色：['0088FE'，'00C49F'，'FFBB28'，'FF8042']}；//0表示完全填充的图形，0{
如果（i==0）{
控制台日志（e）；
keysArray.map（（数据，索引）=>{
如果（数据！=“名称”）{
console.log（indexs）
console.log（数据）
返回(
);
}
})
}
}) }
{/* 
*/}
);
}

---

请帮我弄清楚。。谢谢

在

keysArray.map（（数据，索引）=>{

您需要返回内部映射才能获取数组

当前您得到的是空值数组

---

从您的代码-您将获得2D数组。这是您想要的吗！

您需要从地图返回

return(
    <BarChart width={600} height={300} data={data}
        margin={{top: 20, right: 30, left: 20, bottom: 5}}>
        <CartesianGrid strokeDasharray="6 0"/>
        <XAxis dataKey="name"/>
        <YAxis/>
        <Tooltip/>
        <Legend />


        {  data.map((e, i) => {

            if(i===0){
                console.log(e);
                return keysArray.map((datas,indexs)=>{
                    if(datas!=="name"){
                        console.log(indexs)
                        console.log(datas)
                        return (
                            <Bar dataKey={datas} stackId="a" fill={COLORS[indexs]} />
                        );

                    }
                })
            }


        }) }


    {/* <Bar dataKey="pv" stackId="a" fill="#8884d8" />
   <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
   <Bar dataKey={keysArray[1]} stackId="a" fill={COLORS[0]} />    */}
    </BarChart>
);

返回(
{data.map（（e，i）=>{
如果（i==0）{
控制台日志（e）；
返回keysArray.map（（数据，索引）=>{
如果（数据！=“名称”）{
console.log（indexs）
console.log（数据）
返回(
);
}
})
}
}) }
{/* 
*/}
);

---

希望它有帮助

“{keysArray.map（（d，i）=>（（d！=“name”）？：”）}`这也有帮助，是的，在箭头函数返回的情况下是隐式的，我在那之前回答过。.无论如何，没关系