Question

我有此代码：

    const App = () => {
      const [recipes, setRecipes] = useState([]);
    
      const getRecipes = async () => {
        const response = await fetch(`https://jsonplaceholder.typicode.com/todos`);
        const data = response.json();
        setRecipes(data);
      };
    
      useEffect(() => {
        getRecipes();
      }, []);
    
      return (
        <div className=`App`>
          <ul>
            {recipes.map((recipe) => (
              <li key={recipe.objectID}>
                <li>{recipe.title}</li>
              </li>
            ))}
          </ul>
        </div>
      );
    };

启动npm时我会得到

TypeError：配方.map不是函数

错误。

不知道出什么问题了，如果我将代码更改为不使用async / await而是获取.then（），它将起作用。感谢帮助。

Answer 1

在json（）之前添加等待，因为返回值is a promise

const data = await response.json();

反应：使用useEffect和gettting .map来获取数据不是函数

1 个答案: