如何渲染API返回对象内嵌套的hints数组，解决undefined报错问题

核心错误原因 #

• 变量引用混淆：你用来存储用户输入内容的状态result是字符串类型，而接口返回的hints字段存在你定义的data状态里，你错误地调用了result.hints，字符串没有hints属性，必然返回undefined。
• 缺少存在性判断：data的初始值是空对象，在接口请求完成前data.hints为undefined，直接调用map方法会抛出错误。
• 字段匹配错误：根据你提供的接口返回结构，hints数组的每一项仅包含food和measures两个属性，不存在你代码中写的id和text字段，需要按照实际结构取值。
• 额外规范问题：React中指定元素类名需要用className属性，不要用原生的class，否则会触发React的属性警告。

修复方案 #

1. 你可以选择调整data的初始值，避免后续判断冗余：

const [data, setData] = useState({hints: []})

2. 把原有渲染hints的代码替换为以下安全写法即可正常运行：

{data.hints.length > 0 ? data.hints.map((item) => {
  // 示例取food下的label字段展示，你可以根据实际需求调整取值逻辑
  return <div key={item.food.foodId}>{item.food.label}</div>
}) : "none"}

如果不想修改初始值，也可以用可选链做安全校验：

{data?.hints?.length > 0 ? data.hints.map((item) => {
  return <div key={item.food.foodId}>{item.food.label}</div>
}) : "none"}

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