React中Object.entries处理雷达图数据无法过滤Average字段问题

• 过滤逻辑写法错误：graphs.names[0]是对象类型，直接和字符串'Average'做全等判断永远返回false，且对象本身没有数组的map方法，直接调用会抛出类型错误。
• 原始数据生成逻辑未排除Average键：Object.entries会遍历对象所有自有键，包含Average，导致极角轴读取name字段时会把Average作为轴标签展示。
• 雷达系列字段映射不匹配：原始生成的data对象只有name、age两个属性，第二个雷达系列配置的dataKey: 'Average'读不到对应值，无法正常渲染平均数值系列。
• 存在低级拼写错误：图表渲染函数写为creacteChart，正确拼写应为createChart，会直接触发函数未定义的运行时错误。

核心逻辑是先把Average这个特殊键从原始对象中拆分出来，剩下的三个人员键作为极角轴的展示维度，同时把拆分出的平均数值挂载到每个维度的数据条目上，供第二个雷达系列读取。
完整修复代码如下：

const { names, locations } = graphs ?? {}
function RadarNames() {
    // 边界处理，避免names为空时读取[0]报错
    const sourceData = graphs?.names?.[0] ?? {};
    // 拆分出Average值，剩余属性为需要展示在极角轴的三个人员数据
    const { Average: avgScore, ...personList } = sourceData;
    // 生成图表所需数据，每个条目补充Average字段
    const chartData = Object.entries(personList).map(([personName, score]) => ({
        name: personName,
        age: score,
        Average: avgScore
    }));

    return createChart({
        data: chartData,
        polarAngleAxisOptions: { dataKey: 'name' },
        radars: [
            {
                name: '个人得分',
                dataKey: 'age',
            },
            {
                name: 'Average',
                dataKey: 'Average',
            },
        ],
    })
}

修复后效果：

• 极角轴只会读取到Mona、Paul、Bastian三个name值，不会展示Average标签
• 两个雷达系列都能正确读取对应字段：第一个系列读每个人员的个人得分，第二个系列读固定的平均分值，正常渲染闭合的雷达图形
• 增加了可选链兜底逻辑，接口数据未返回时不会抛出读取属性的报错

内容的提问来源于stack exchange，提问作者ZPaulB