React调用recipe.map报错提示不是函数，是什么原因？如何解决？

问题根因 #

recipe.map is not a function 报错的核心原因是：你调用setRecipe赋值的res.data是对象类型，不是你预期的数组，而map是仅数组可调用的方法。
你使用的Edamam美食搜索接口返回结构为外层包裹的对象，实际需要的食谱列表存储在返回体的hits字段下，你直接将整个返回对象赋值给初始为数组的recipe变量，覆盖了其数组类型，因此调用map方法时抛出异常。

修复方案 #

仅需要修改setRecipe的取值逻辑，取返回体的hits字段赋值即可：

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await axios.get(url);
      // 取返回体中的hits数组赋值给recipe
      setRecipe(res.data.hits);
      console.log(res.data.hits);
    } catch (err) {
      console.error(err);
    }
  };
  fetchData();
}, []);

可选鲁棒性优化 #

渲染前增加数组类型判断，避免接口异常返回非数组格式时页面直接崩溃，同时补充列表渲染必填的key属性避免React告警：

return (
  <div>
    {Array.isArray(recipe) && recipe.map((r, index) => {
      return <RecipeCard key={index} recipe={r} />;
    })}
  </div>
);

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