React中无法用Axios获取的数据填充useState问题求助

问题根源 #

你的代码存在两个核心问题：

1. 异步时序错误：axios.post是异步操作，调用getData()后立刻执行console.log(window.userData)和useState初始化，此时请求还未完成，window.userData还未被赋值，因此显示undefined。
2. 错误使用async/await：声明了async function getData()但内部用.then()处理异步，没发挥async/await的作用，同时全局变量也不是React中管理状态的正确方式。

正确写法（React组件场景） #

利用React的useState和useEffect配合async/await处理异步请求：

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

function YourComponent() {
  // 初始化email状态为空值
  const [email, setEmail] = useState('');

  useEffect(() => {
    // 定义异步函数获取数据
    async function getData() {
      try {
        const requestData = { KorisnickoIme: 'uros' };
        const apiUrl = 'https://localhost:44357/api/Fin/ProfileSetUp';
        // 用await等待请求完成，直接拿到结果
        const response = await axios.post(apiUrl, requestData);
        const userData = response.data.split(';');
        // 拿到数据后更新state，触发组件重新渲染
        setEmail(userData[1]);
        // 此时打印就能拿到正确数据
        console.log(userData);
      } catch (error) {
        alert(error);
      }
    }

    // 调用异步函数
    getData();
  }, []); // 空依赖数组，确保组件挂载时只执行一次请求

  return (
    <div>
      <p>用户邮箱：{email}</p>
    </div>
  );
}

关键说明 #

• 用useEffect包裹异步请求，确保组件挂载后再发起请求，避免初始化时数据未就绪的问题。
• 使用await等待axios请求完成，保证后续代码能拿到返回结果再执行。
• 放弃全局变量，用React的useState管理状态，数据获取完成后调用setEmail更新视图，这是React中处理异步数据的标准方式。

替代写法（使用.then()） #

如果习惯用.then()处理异步，也要把状态更新逻辑放在回调内部：

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

function YourComponent() {
  const [email, setEmail] = useState('');

  useEffect(() => {
    const requestData = { KorisnickoIme: 'uros' };
    const apiUrl = 'https://localhost:44357/api/Fin/ProfileSetUp';
    
    axios.post(apiUrl, requestData)
      .then(response => {
        const userData = response.data.split(';');
        setEmail(userData[1]);
        console.log(userData);
      })
      .catch(error => alert(error));
  }, []);

  return <p>用户邮箱：{email}</p>;
}

内容的提问来源于stack exchange，提问作者Uroš Milošević