Material UI TextField默认值不显示问题求助

问题根源 #

• 组件首次渲染时toDo是空对象，解构出的title、details、category都是undefined，Material UI TextField的defaultValue在值为undefined时不会渲染任何内容。
• defaultValue是非受控组件的属性，仅在组件首次渲染时生效，异步获取到数据后不会自动更新输入框内容。

可行解决方案 #

方案1：改用受控组件（推荐，适配更新表单场景） #

更新表单更适合用受控组件管理状态，能保证输入框内容和数据实时同步：

1. 新增表单状态，替代直接使用toDo的数据：

const [formState, setFormState] = useState({ title: '', details: '', category: '' });

useEffect(() => {
  axiosConfig
    .get(`/todo/${todoId}`)
    .then((response) => {
      setFormState(response.data); // 获取到数据后更新表单状态
    })
    .catch((error) => {
      setError(true);
    });
}, [todoId]);

2. 调整字段数组和TextField属性，用value绑定表单状态，onChange同步更新：

const textFields = [
  { name: "title", value: formState.title },
  { name: "details", value: formState.details },
  { name: "category", value: formState.category },
];

// 渲染TextField部分
{textFields.map((el) => (
  <TextField
    fullWidth
    key={el.name}
    value={el.value} // 用value替代defaultValue
    label={_.startCase(el.name)}
    name={el.name}
    onChange={(e) => setFormState(prev => ({ ...prev, [e.target.name]: e.target.value }))}
  />
))}

方案2：保留非受控组件，优化渲染逻辑 #

如果一定要用非受控组件，需要确保数据加载完成后再渲染TextField，并处理undefined的情况：

1. 给字段设置默认值，避免初始渲染时出现undefined：

const { title = '', details = '', category = '' } = toDo;
const textFields = [
  { name: "title", value: title },
  { name: "details", value: details },
  { name: "category", value: category },
];

2. 等待数据加载完成后再渲染TextField：

// 判断toDo是否包含有效数据，再渲染输入框
{Object.keys(toDo).length > 0 && textFields.map((el) => (
  <TextField
    fullWidth
    key={el.name}
    defaultValue={el.value}
    label={_.startCase(el.name)}
    name={el.name}
    onChange={(e) => handleSetFormState(e)}
  />
))}

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