React-JavaScript：实现函数切换图表参数以动态拉取对应数据

核心要解决的是通过变量动态访问对象属性的问题，同时要处理切换时的数据重置，以下是具体实现步骤：

1. 改造数据处理函数 #

修改handleChangeParam，让它接收当前要切换的参数作为入参，用方括号语法动态访问对象属性，同时每次调用时重置数组避免数据累加：

const param = ['Country', 'Device_Model', 'MMA', 'Game']

const handleChangeParam = (currentParam) => {
  // 每次调用初始化新数组，防止旧数据残留
  let arr = []
  for (let i = 0; i < context.gameAdData.length; i++) {
    context.gameAdData[i].forEach((element) => {
      // 用方括号语法动态访问属性，可选链避免属性不存在时报错
      arr.push(element._fieldsProto[currentParam]?.stringValue)
    })
  }
  return arr
}

2. 添加参数切换逻辑 #

用React状态管理当前选中的参数，遍历param数组生成切换按钮，点击时更新状态并实时拉取对应数据：

import { useState } from 'react'

// 组件内维护当前选中参数的状态
const [activeParam, setActiveParam] = useState('Game')
// 实时获取当前参数对应的数据
const currentChartData = handleChangeParam(activeParam)

// 渲染切换按钮与图表
return (
  <div>
    {/* 生成参数切换按钮 */}
    {param.map(item => (
      <button
        key={item}
        onClick={() => setActiveParam(item)}
        style={{
          margin: '0 6px',
          padding: '5px 10px',
          border: '1px solid #ddd',
          borderRadius: '4px',
          cursor: 'pointer',
          backgroundColor: activeParam === item ? '#2563eb' : '#fff',
          color: activeParam === item ? '#fff' : '#333'
        }}
      >
        {item}
      </button>
    ))}
    {/* 传入当前数据渲染图表 */}
    <YourChartComponent data={currentChartData} />
  </div>
)

关键细节说明 #

• 方括号语法：element._fieldsProto[currentParam]是实现动态属性访问的核心，替代原来固定的点语法，支持用变量指定属性名。
• 可选链?.：避免某个参数在_fieldsProto中不存在时抛出错误，提升代码健壮性。
• 数组重置：将arr声明在函数内部，每次调用都会重新初始化，解决多次切换后数据累加的问题。

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