类型错误：display.map 不是一个函数。

Question

React 代码

我知道这是一个小问题，但我正在学习 React

当我使用 console.log 显示数据时，它可以正常显示
但我尝试在屏幕上显示时，遇到了此错误 TypeError：display.map 不是一个函数

我认为这里有误

const recipeApi = async() =>{
  const ID = '96ffd3cd';
  const KEY = 'd66772eb315fdcd45e86cdb4579f1888';
  const response = await fetch(`https://api.edamam.com/search?q=chicken&app_id=${ID}&app_key=${KEY}`);
  const jsonData = await response.json();

  setDisplay(jsonData)
  console.log(setDisplay)
}

---

完整代码

import './App.css';
import { useState } from 'react';
import { useEffect } from 'react';

function App() {
   const [display, setDisplay] = useState([]);

 useEffect(()=>{
   recipeApi()
 },[])  


const recipeApi = async() =>{
   const ID = '96ffd3cd';
  const KEY = 'd66772eb315fdcd45e86cdb4579f1888';
  const response = await fetch(`https://api.edamam.com/search?q=chicken&app_id=${ID}&app_key=${KEY}`);
  const jsonData = await response.json();
  
  setDisplay(jsonData)
  console.log(setDisplay)
}
  

  return (
     <div className="App">
        <div className='recipe-item'>
        {display.map((values) =>{
           return(
              <div>
                 <div>{values}</div>
              </div>
           )
        })}
           
       </div>
    </div>
  );
}

export default App;

- Raskhith

---

我可以看一下你的jsonData吗？ - Amr

提醒一下，你的console.log只显示了setDisplay这个函数，而没有显示jsonData。请按照我的回答更改代码并检查json数据的实际情况。 - Azarro

我建议不要在帖子中放置你实际的 id 和 key，因为任何人都可以使用它。 - kiranvj

Answer 1

注意：您的console.log正在显示方法setDisplay，而不是您的json数据。

您的jsonData没有作为数组返回。仔细检查您的json数据结构。

当您执行setDisplay(jsonData)时，请确保您在状态中设置的实际上是一个数组，而不是一个对象。

很有可能您的jsonData看起来像一个对象，例如：

{
  data: [....]
}

或其他字段名称（值为数组）。

使用该字段名称，您需要执行以下操作：

setDisplay(jsonData.data);

再次说明，其中.data是返回的json对象中一个数组的字段名。

编辑：我使用您代码中的键和ID查看了API响应。

结构如下：

{
 hits: [ {recipe: {...}}, {recipe: {...}}, {recipe: {...}}]
}

我猜您想要展示食谱，因此您应该在获取数据时进行以下操作：

const recipeApi = async() =>{
  const ID = '<YOUR ID HERE';
  const KEY = '<YOUR KEY HERE>';
  const response = await fetch(`https://api.edamam.com/search?q=chicken&app_id=${ID}&app_key=${KEY}`);
  const jsonData = await response.json();

  setDisplay(jsonData.hits) // now contains an array of objects containing recipe objects
  console.log(jsonData.hits)
}

现在，在您的App组件的JSX中，您不能简单地将一个对象放入JSX（它会出错），因为values现在是一个包含1个键recipe和一堆值的对象。

处理您的数据以查看您实际想要显示的内容，但现在您可以做的简单事情只是显示每个食谱的标签：

return (
     <div className="App">
        <div className='recipe-item'>
        {display.map((recipeData) =>{
           return(
              <div>
                 <div>{recipeData.recipe.label}</div>
              </div>
           )
        })}
           
       </div>
    </div>
  );

- Azarro

Answer 2

您的jsonData是一个对象，而不是数组。这就是为什么您无法在display值上使用.map的原因。

以下是代码链接：link。

import { useState } from "react";
import { useEffect } from "react";

function App() {
  const [display, setDisplay] = useState({});

  useEffect(() => {
    recipeApi();
  }, []);

  const recipeApi = async () => {
    const ID = "96ffd3cd";
    const KEY = "d66772eb315fdcd45e86cdb4579f1888";
    const response = await fetch(
      `https://api.edamam.com/search?q=chicken&app_id=${ID}&app_key=${KEY}`
    );
    const jsonData = await response.json();

    console.log("json data ->", jsonData);

    setDisplay(jsonData);
  };

  return (
    <div className="App">
      <div className="recipe-item">
        <div>{display.q}</div>
        <div>{display.from}</div>
        <div>{display.to}</div>
        <div>{display.more}</div>
      </div>
    </div>
  );
}

export default App;

- coderpc

---

这不是他们试图做的事情。他们的代码明显在尝试显示来自值数组的数据。他们可能正在尝试访问包含食谱的“hits”字段。 - Azarro

Answer 3

您的JSON响应不是一个数组。

你的代码应该像下面这样。

   {display && Array.isArray(display.hits) &&  display.hits.map((item) =>{
       return(
          <div>
             <div>{item.recipe.label}</div>
          </div>
       )
    })}

- kiranvj

Answer 4

Map函数只能用于数组，当你从setDisplay更新状态时，更新后的状态将成为一个JSON对象。因此，你必须在状态中设置一个数组才能执行Map函数。

- Muhammad Ahab