undefined useState React 将其设置为对象后

Question

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

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

问题：

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

Answer 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 中等待它产生的任何结果。然后继续将其添加到您的状态。参见示例。

Answer 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

undefined useState React 将其设置为对象后

undefined useState React after setting it to an object

javascript

reactjs

use-state