【问题标题】：Can't fetch data with Axios and React, getting an Promise and Undefined无法使用 Axios 和 React 获取数据，得到 Promise 和 Undefined
【发布时间】：2021-12-07 08:18:01
【问题描述】：

我正在尝试使用 Axios 和 React 获取一些数据，但我在解决承诺并将其设置为状态时遇到问题，这很奇怪。

这是基地：

export const fetchUserById = (username) => client.get(`/${username}`);

这是电话：

export const getUserById = async (username) => {
   try {
      const response = await api.fetchUserById(username);
      const data = await response.data;
      return data;
   } catch (error) {
      return error;
   }
};

这是在 React 中：

const [user, setUser] = useState();
    
    useEffect(() => {
        const data = getUserById(params.username); // this gets the username and its working
        setUser(data)
    }, [])

    useEffect(() => {
        console.log("this is user: ", user)
    }, [user])

如果我控制台日志用户，我得到未定义，如果我控制台日志数据，我得到一个承诺。

【问题讨论】：

标签： reactjs axios

【解决方案1】：

getUserById 被声明为 async，因此它隐式返回一个 Promise，即调用者应使用 await 或使用 Promise 链。

useEffect(() => {
  const data = getUserById(params.username);
  setUser(data); // <-- logs only the returned Promise object!
}, [])

`async/await`

useEffect(() => {
  const getUser = async () => {
    try {
      const data = await getUserById(params.username);
      setUser(data);
    } catch(error) {
      // handle error, log, etc...
    }
  };

  getUser();
}, []);

承诺链

useEffect(() => {
  getUserById(params.username)
    .then(data => {
      setUser(data);
    })
    .catch(error => {
      // handle error, log, etc...
    });
  };
}, []);

【讨论】：

【解决方案2】：

或者你也可以这样做：

useEffect(() => {
  // fetch data
  (async () => {
    try {
      const data = await getUserById(params.username);
      // set state
      setUser(data) 
    } catch(error) {
      // handle error, log, etc...
      // set init state
      setUser(null) 
    }
  })();
 
}, []);

【讨论】：