如何在ReactJS中从Merriam Webster词典API获取例句？

核心问题 #

你遇到的问题主要来自两个点：

1. 你请求的单词cat的API响应里可能根本没有suppl属性，或者该属性嵌套在更深的层级中，并非直接挂载在result[0]下。
2. 直接链式访问属性时未做存在性校验，一旦某个中间属性缺失（比如suppl不存在），就会抛出"未定义属性"的错误。

解决步骤 #

1. 先确认实际返回的JSON结构
   别用alert查看数据，改用console.log打印完整响应，这样能清晰看到所有层级：

   fetch('https://www.dictionaryapi.com/api/v3/references/collegiate/json/cat?key=MY_API_KEY')
     .then(res => res.json())
     .then(result => {
       console.log('完整API响应:', result);
     });
   

   打开浏览器控制台查看输出，确认suppl是否存在，以及它的具体嵌套路径。比如韦氏API的结构里，例句有时会嵌套在result[0].def[0].senses[0].suppl这类深层路径中，而非直接在result[0]下。

2. 用可选链安全访问属性
   即使属性存在，也可能因为单词不同导致结构差异，用可选链?.可以避免因属性缺失抛出错误：

   fetch('https://www.dictionaryapi.com/api/v3/references/collegiate/json/cat?key=MY_API_KEY')
     .then(res => res.json())
     .then(result => {
       // 安全获取第一个例句
       const firstExample = result[0]?.suppl?.examples?.[0]?.t;
       console.log('第一个例句:', firstExample || '无可用例句');
     });
   

3. 注意例句的其他存储位置
   韦氏词典的例句不一定都在suppl.examples里，部分单词的例句会放在vi（口头例证）或cit（引用）字段中，你可以在控制台输出里搜索"t":来定位所有例句内容。

你代码中的明显错误 #

• result[0].suppl.examples.t：examples是数组，不能直接访问t，必须通过索引（比如examples[0].t）获取数组元素后再读取t字段。
• 未做任何存在性检查，一旦suppl或examples不存在，直接访问就会触发错误。

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