React页面在useEffect更新状态前渲染，如何等待Axios请求完成再渲染？

问题原因 #

1. 组件首次渲染时，myAddr初始值为null，此时TextField的defaultValue被设置为null，导致显示NULL。
2. defaultValue是一次性赋值属性，不会跟随状态myAddr的更新自动同步，所以即使API请求完成后状态更新，TextField也不会刷新显示新值。

解决方案 #

方案一：使用受控组件（推荐）

将TextField改为受控组件，用value绑定状态，并添加onChange处理逻辑，同时新增加载状态优化用户体验：

import { useState, useEffect } from 'react';
import axios from 'axios';
import TextField from '@mui/material/TextField';

const YourComponent = () => {
  const [myAddr, setMyAddr] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const grabAddress = async () => {
      const url = "http://localhost:5001/getAddress";
      try {
        const response = await axios.get(url);
        setMyAddr(response.data.result);
      } catch (e) {
        console.log("error:" + e);
      } finally {
        setIsLoading(false);
      }
    };
    grabAddress();
  }, []);

  return (
    <div>
      {isLoading ? (
        <span>加载中...</span>
      ) : (
        <TextField
          value={myAddr || ""}
          onChange={(e) => setMyAddr(e.target.value)}
          // 其他原有属性
        />
      )}
    </div>
  );
};

export default YourComponent;

说明：

• 受控组件通过value与状态双向绑定，状态更新时TextField会自动重新渲染显示最新值。
• isLoading状态用于在请求未完成时显示加载提示，避免用户看到异常的空输入框。
• myAddr || ""确保当myAddr为null时，输入框显示空字符串而非NULL。

方案二：使用非受控组件（仅特殊场景使用）

如果必须使用非受控组件，可通过useRef手动更新TextField的值：

import { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import TextField from '@mui/material/TextField';

const YourComponent = () => {
  const [myAddr, setMyAddr] = useState(null);
  const textFieldRef = useRef(null);

  useEffect(() => {
    const grabAddress = async () => {
      const url = "http://localhost:5001/getAddress";
      try {
        const response = await axios.get(url);
        const addr = response.data.result;
        setMyAddr(addr);
        if (textFieldRef.current) {
          textFieldRef.current.value = addr;
        }
      } catch (e) {
        console.log("error:" + e);
      }
    };
    grabAddress();
  }, []);

  return (
    <TextField
      ref={textFieldRef}
      defaultValue={myAddr || ""}
      // 其他原有属性
    />
  );
};

export default YourComponent;

说明：

• 通过useRef获取TextField的DOM引用，在API请求完成后手动修改其value。
• 该方式需要直接操作DOM，不符合React的状态管理理念，仅在特殊场景下使用。

内容的提问来源于stack exchange，提问作者eee eee