在React的map函数中使用state作为JSON动态键出现报错如何解决

API 探路者

2026-10-6

问题解决说明

核心错误点

你使用的dataArray.dynamicState写法是固定读取对象下名为dynamicState的属性，而你的JSON结构中不存在该键，因此会返回undefined，调用map方法自然报错。如果要使用变量的值作为对象的键读取属性，必须使用JavaScript的方括号动态属性访问语法。

修正后的完整代码

import { useState } from 'react';
import dataJson from "./data/data.json"

function App() {  
  const [dynamicState, setDynamicState] = useState("EN");
  // 用方括号读取动态state对应的语言数据
  const currentLangData = dataJson[dynamicState];

  return ( 
  <div>
    <div className="container">   
      {/* 可选链?.避免dynamicState取值异常时页面崩溃 */}
      {currentLangData?.map((estacion) => (
        <div className="cardEstacion" key={estacion.id}>
          <h2 className="cardTitle">{estacion.title}</h2>
          <p className="cardSubtitle">{estacion.subTitle}</p>
        </div>
      ))}      
    </div>
  </div>
  );
}