React中使用useEffect设置Material-UI TextField默认值不生效问题

问题根源 #

Material-UI的TextField的defaultValue属性仅在组件首次挂载渲染时生效，属于非受控组件的属性。你在useEffect中修改uname时，TextField已经完成首次渲染，defaultValue不会响应后续的状态变化，因此默认值无法展示。

推荐解决方案：使用受控组件模式（适配编辑场景） #

编辑场景下更推荐使用受控模式绑定TextField的值，方便后续处理用户输入、表单校验等逻辑，修改点如下：

1. 给TextField增加value属性绑定状态uname
2. 增加onChange属性监听用户输入，同步更新状态
3. 补充表单提交的事件处理逻辑
4. 给useEffect增加空依赖数组，避免重复执行赋值逻辑

修改后的完整代码：

import React,{useEffect,useState } from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const Editform = () => {
  const [uname, setname] = useState('');

  // 增加空依赖数组，仅组件首次挂载时执行赋值（模拟从接口拉取编辑数据的场景）
  useEffect(() => {
      setname("Jubed Alam"); 
  }, []);

  // 监听TextField输入变化，同步更新状态
  const handleNameChange = (e) => {
    setname(e.target.value);
  }

  // 表单提交处理
  const handleSubmit = (e) => {
    e.preventDefault();
    const values = {
      name: uname
    }
    console.log(values);
  };

  return (
        <form onSubmit={handleSubmit}>
            <TextField
                margin="normal"
                label="Name"
                fullWidth
                name="name"
                // 新增value绑定和onChange事件，改为受控组件
                value={uname}
                onChange={handleNameChange}
            />
          <Button variant="contained" color="primary" type="submit">
            Submit
          </Button>
        </form>
  );
}

export default Editform;

备用方案：非受控模式适配异步默认值 #

如果你坚持要使用非受控模式，可以给TextField增加key属性，值和你的默认值绑定，当默认值更新时，key变化会触发TextField重新挂载，defaultValue就会生效：

<TextField
    margin="normal"
    label="Name"
    fullWidth
    name="name"
    defaultValue={uname}
    key={uname} // 新增key属性，值变化时组件重新挂载
/>

注意：这种方式会在默认值变化时重新渲染整个TextField组件，输入过程中如果值变化会丢失输入焦点，仅适合默认值仅设置一次、后续不需要响应用户输入动态修改的场景

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