undefined useState React 将其设置为对象后答案

【问题标题】：undefined useState React after setting it to an objectundefined useState React 将其设置为对象后
【发布时间】：2021-07-14 10:13:54
【问题描述】：

目标：从 api 获取数据，然后将其分配给状态以进行进一步处理。

问题：将数据设置为我的 useState 后，它仍然未定义。

问题：

如何解决这个问题？
我是否误解了 useState 挂钩？

【问题讨论】：

你的函数没有返回任何东西。

标签： javascript reactjs use-state

【解决方案1】：

import "./styles.css";
import axios from "axios";
import { useEffect, useState } from "react";

export default function App() {
  const [userData, setUserData] = useState();

  const functionz = () => {
    return axios
      .get("https://randomuser.me/api/")
      .then(({ data }) => data.results);
  };
  useEffect(async () => {
    const data = await functionz();
    setUserData(data);
  }, []);

  if (userData) {
    console.log(userData);
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Edit to see some magic happen!</h2>
    </div>
  );
}

您必须确保您的函数正在返回 axios 调用。然后在你的 useEffect 中等待它产生的任何东西。然后继续将其添加到您的状态。见例子。

【讨论】：

谢谢，是的，所以基本上 useEffect 正在运行这两个函数，而不关心等待，因为它在 fetchRandomUserData 函数中。

【解决方案2】：

import React, { useState, useEffect } from 'react'
import axios from "axios";

const Api = () => {
  const [usersData, setUsersData] = useState(null)

  const fetchRandomUserData = () => axios.get('the-url')

  useEffect(() => {
    fetchRandomUserData()
      .then(resp => {
        setUsersData(resp.data.results)
      })
      .catch(e => {
        console.log('Error: ', e)
      })
  }, [])

  console.log(usersData)

  return <div></div>
}

export default Api

【讨论】：