React中如何仅在data不为undefined时执行map渲染并避免报错？

根因分析 #

• 你声明data状态时设置的初始值为[]（空数组），而非undefined，因此typeof data === "undefined"的判断逻辑永远不成立，代码会直接执行data.hints.map部分。空数组不存在hints属性，调用时直接触发报错。
• 即使后续接口返回数据，也无法保证返回结构中一定存在hints字段，且hints可能不是可遍历的数组类型，直接调用map仍存在报错风险。
• 额外注意：你map遍历的回调参数命名为data，和外层的状态变量data重名，存在变量作用域冲突的隐患。

修复方案 #

1. 替换渲染逻辑 #

将原来的条件渲染代码替换为更稳妥的可选链判断写法，兼容所有异常场景：

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

?.可选链运算符会在前面的属性不存在时直接返回undefined，不会抛出异常，此时判断hints数组是否有长度，有则遍历渲染，没有则显示none。

2. 可选优化：避免空请求 #

你当前的useEffect会在result为空时也发起接口请求，既浪费资源也可能返回不符合预期的结构，可添加判断逻辑：

useEffect(() => {
  // 搜索内容为空时直接重置数据，不发起请求
  if (!result.trim()) {
    setData([])
    return
  }
  const options = {
    method: 'GET',
    url: 'https://edamam-food-and-grocery-database.p.rapidapi.com/parser',
    params: {ingr: result},
    headers: {
      'x-rapidapi-host': 'edamam-food-and-grocery-database.p.rapidapi.com',
      'x-rapidapi-key': '6bc4948226msh1716c54bf80ad8dp1c8c12jsnac7a17a9e0a6'
    }
  };
  axios.request(options).then(function (response) {
    setData(response.data);
  }).catch(function (error) {
    console.error(error);
  });
}, [result])

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