React中设置TextField的value为address.suburb后无法输入如何解决

• 字段绑定不匹配：当前TextField的name属性设为streetNumber，但value绑定的是address.street。react-hooks-helper提供的setForm默认会根据输入框的name属性更新对应顶层字段，所以输入的内容只会被写到formData的顶层streetNumber属性中，不会修改嵌套的address.street，输入框的value永远是初始空值，看起来就无法输入。
• useForm默认不支持嵌套对象更新：你需要修改的address是formData下的嵌套对象，默认的setForm无法自动识别嵌套路径更新对应字段，哪怕将name改为street，也只会修改顶层的street属性，不会更新address内部的属性。
  这也是为什么其他组件用同样写法可以正常运行：其他组件操作的都是formData的顶层属性，不需要处理嵌套结构，直接调用setForm就能正常更新。

1. 先修正TextField的name属性，用点分隔的路径标识嵌套字段，同时删除重复的variant属性：

<TextField
  id="outlined-basic"
  label="Street number"
  variant="standard"
  value={address.street}
  name="address.street" // 改为嵌套路径格式
  onChange={handleChange} // 替换为自定义更新函数
  margin="normal"
  autoComplete="off"
  fullWidth
/>

2. 在FlatAddress组件内新增自定义的嵌套字段更新函数，替换原生的setForm调用：

const FlatAddress = (props) => {
  const { navigation, formData, setForm } = props;
  const { address } = formData;

  // 新增嵌套字段处理逻辑
  const handleChange = (e) => {
    const { name, value } = e.target;
    const [parentField, childField] = name.split('.');
    setForm({
      [parentField]: {
        ...formData[parentField],
        [childField]: value
      }
    });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    navigation.next();
    console.log(address);
  };

  // return部分代码保持不变
}

如果后续需要处理更深层级的嵌套字段，可以写更通用的递归拆分路径的逻辑，当前两层嵌套的场景以上代码完全可用。

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