React中如何在map()内使用条件判断切换要渲染的数组字段

实现方案 #

你提到的item[ColState]动态属性访问写法本身是正确的，运行失败大概率是细节写错导致的，以下是完整可运行的实现代码：

import { useState } from 'react';

// 你的原始数组数据
const stuff = [
  { id: "1", col1: 232, col2: 232 },
  { id: "2", col1: 400, col2: 650 },
  { id: "3", col1: 300, col2: 300 }, // 原数组存在id重复问题，建议修正为唯一值
];

export default function ChartComponent() {
  // 状态定义注意大小写统一，这里使用小驼峰命名，初始值设为默认展示的col1
  const [colState, setColState] = useState('col1');

  return (
    <div>
      {/* 切换按钮 */}
      <button onClick={() => setColState('col1')}>显示col1数据</button>
      <button onClick={() => setColState('col2')}>显示col2数据</button>

      {/* 渲染列表：注意map必须加唯一key属性，否则React会报渲染警告
          如果你把原数组赋值给了chartData变量，把遍历源换成chartData即可 */}
      {stuff.map((item) => (
        <div key={item.id}>
          {/* 方括号动态访问属性即可实现切换 */}
          {item[colState]}%
        </div>
      ))}
    </div>
  )
}

常见问题排查 #

• JSX的{}中只能放表达式，不能放if语句这种代码块，你之前的if(ColState=="col2"){return item.col2}属于语句，无法直接嵌入JSX。如果要写判断可以用三元表达式替代：{colState === 'col2' ? item.col2 : item.col1}，效果和动态属性访问一致
• JS变量大小写敏感，注意状态变量的命名要统一，比如定义的是colState就不能写成ColState
• 数组元素的id重复会导致key属性冲突，也可能引发渲染异常，建议修正为唯一值

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