在 React.js 中获取 api 的 useEffect 钩子中的问题 [重复]答案

【问题标题】：problem in useEffect hook to fetch api in React.js [duplicate]在 React.js 中获取 api 的 useEffect 钩子中的问题 [重复]
【发布时间】：2021-05-03 16:22:45
【问题描述】：

这是 react 项目中的 bootcamp.js 文件

import React, { Component, useState, useEffect } from 'react';

const Bootcamps = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [bootcamps, setBootcamps] = useState();

  const loadData = async () => {
    const response = await fetch('http://localhost:5000/api/v1/bootcamps');
    const data = await response.json();

    setIsLoaded(true);
    setBootcamps(data);
    console.log(data);      // showing data
    console.log(bootcamps); // showing undefined
  };

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

........
......
...

console.log(bootcamps) 显示未定义。请帮忙

【问题讨论】：

标签： reactjs react-hooks fetch-api setstate use-effect

【解决方案1】：

setBootcamps 是异步的，所以你不能在 setter 函数被调用后立即看到结果。

您可以添加另一个带有训练营状态的 useEffect 作为依赖项。因此，当训练营发生变化时（在状态设置之后），您需要做一些事情。

  useEffect(() => {
    console.log({ bootcamps });
  }, [bootcamps]);

【讨论】：

【解决方案2】：

如果你愿意，你可以这样尝试；

const loadData = async () => {
    const response = await fetch('http://localhost:5000/api/v1/bootcamps');
    const data = await response.json();

    setIsLoaded(true);
    setBootcamps(data);
  };



useEffect(() => {
    loadData();
   console.log(bootcamps)
  }, [bootcamps]);

因为你的依赖缺失，我不知道你的数据类型，但你的数据是一个对象，如果你想试试的话；

const [bootcamps, setBootcamps] = useState({});

【讨论】：