React Material-UI TextField绑定value属性后无法输入问题解决

你碰到的输入框无法输入、defaultValue不显示初始值的问题，本质是React受控组件的状态绑定逻辑写岔了，外加对defaultValue的生效时机理解有误：

• 你给TextField的value绑定的是roleData.roleName，但输入触发的onChange更新的是独立的RoleName状态，两个状态完全不互通：输入时改的是RoleName，但输入框始终读取未更新的roleData.roleName作为显示值，自然敲什么都没反应。
• defaultValue只在组件第一次挂载的时候读取一次赋值，你的角色数据是异步从接口拉取的，组件刚挂载的时候roleData还是空数组，等接口返回数据更新roleData时，组件早就完成首次渲染了，defaultValue不会跟着二次更新，所以初始值显示不出来。
• 额外提一句，你原代码里调用了setDescription但没声明Description对应的state，提交的时候会直接报错。

两种写法都可以，按你的表单复杂度选择即可：

方案1：独立维护每个表单字段的状态（适合字段少的表单） #

接口拿到数据后，直接把字段值同步到对应表单state上，输入框的value和onChange都绑定到同一个state，保证状态和显示值完全同步。
核心修复后的代码：

const EditRoles = () => {
  const { idrole } = useParams();
  const history = useNavigate();

  // 所有表单字段state初始值设为空字符串，避免undefined触发非受控组件告警
  const [RoleName, setRoleName] = useState('');
  const [Description, setDescription] = useState('');

  // 拉取角色详情
  useEffect(() => {
    axios.get(`http://localhost:3001/role/view/${idrole}`).then((response) => {
      const detail = response.data[0];
      // 接口返回后把数据同步到表单state
      setRoleName(detail.roleName ?? '');
      setDescription(detail.description ?? '');
    });
  }, [idrole]);

  const EditRole = async (idrole) => {
    await axios
      .put('http://localhost:3001/role/edit', {
        roleName: RoleName,
        description: Description,
        idrole: idrole,
      })
      .then(() => {
        swal({
          text: 'Role updated successfully',
          icon: 'success',
          timer: 6000,
          buttons: false,
        });
      });
    setRoleName('');
    setDescription('');
  };

  return (
    <>
      <div className="formPage">
        <Header title="Edit Role" />
        <div className="FormContainer">
          <form
            onSubmit={(e) => {
              e.preventDefault(); // 阻止表单默认提交刷新页面
              EditRole(idrole);
            }}
          >
            <FormLabel color="success" required="true" className="label">
              Role Name
            </FormLabel>
            <br />

            <TextField
              style={{ paddingBottom: '30px' }}
              variant="outlined"
              fullWidth
              name="roleName"
              onChange={(e) => setRoleName(e.target.value)}
              value={RoleName} // 绑定对应表单state，不要绑roleData
            />
            {/* Description字段同理，value绑定Description，onChange触发setDescription */}

            <br />
           
            <div style={{ paddingTop: '50px' }}>
              <span style={{ paddingLeft: '55%' }}>
                <Button
                  variant="contained"
                  color="info"
                  type="submit"
                >
                  Save
                </Button>
              </span>

              <span style={{ paddingLeft: '10%' }} onClick={() => history(-1)}>
                <Button variant="contained" color="secondary">
                  <ArrowBackIosNewIcon fontSize="small" />
                  Back
                </Button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </>
  );
};

export default EditRoles;

方案2：单对象统一管理所有表单状态（适合字段多的表单） #

不用拆出多个独立state，所有表单值都存在roleData里，输入时更新roleData对应字段即可，注意roleData初始值要改成和接口返回结构一致的对象，不要用空数组。
核心改动点：

// 初始值对齐接口返回结构
const [roleData, setRoleData] = useState({
  roleName: '',
  description: ''
});

// TextField绑定逻辑
<TextField
  style={{ paddingBottom: '30px' }}
  variant="outlined"
  fullWidth
  name="roleName"
  onChange={(e) => {
    setRoleData(prev => ({...prev, roleName: e.target.value}))
  }}
  value={roleData.roleName}
/>

提交逻辑里直接从roleData取字段值即可，不用维护多套状态，代码更简洁。

• 异步拉取的表单初始值不要用defaultValue绑定，defaultValue仅适用于非受控组件、且初始值在组件挂载时就已确定的场景。
• 不要给表单state传undefined初始值，否则React会先把组件判定为非受控组件，后续传入value时会抛类型错误。
• 表单onSubmit事件必须加e.preventDefault()，否则会触发浏览器默认的整页刷新行为。

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