如何在React渲染逻辑中使用state变量word动态访问词典对象对应数据

API 探路者

2026-10-6

问题原因&解决方法

变量访问对象属性的语法错误
JavaScript中如果要用动态变量作为键读取对象属性，必须使用方括号语法，你尝试的$word/$`word` 写法都不符合JS语法规范，正确写法是data[word]。
数据结构访问路径错误
你定义的data里每个单词的MEANINGS是对象类型，键为字符串"2"，不是数组，所以不能直接写MEANINGS[0]，需要先拿到MEANINGS['2']对应的释义数组，再按索引取对应字段。

修正后的渲染部分代码

return ( 
  <>
    <div>
      <label>Word</label>
      <input type="text" value={word} onChange={(e) => setWord(e.target.value.toUpperCase())} />
    </div>
    <div className="container pt-n5" >
      <div className="jumbotron d-flex justify-content-center " >
        <div>
          <b>当前查询单词：</b>{word} <br />
          <b>词性：</b>
          <p>{data[word]?.MEANINGS['2'][0]}</p>
          <b>释义：</b>   
          <p>{data[word]?.MEANINGS['2'][1]}</p>
          <b>近义词参考：</b>   
          <p>{data[word]?.MEANINGS['2'][2]?.join('、')}</p>
          <b>例句：</b>   
          <p>{data[word]?.MEANINGS['2'][3]?.join('；')}</p>
        </div>
      </div>
    </div>
  </>
);