React中Axios Post请求如何为嵌套对象字段赋值？

直接修改两处代码就能解决嵌套data.mail的赋值问题，不用新增多余常量：

1. 修正邮箱输入框的属性 #

把邮箱输入的name设为"data.mail"，同时正确绑定value：

<label htmlFor="mail">
  Электронный адрес
  <input 
    id="mail" 
    type="email" 
    name="data.mail" 
    value={inputData.data.mail || ""} 
    onChange={handleChange}
  />
</label>

注：inputData.data.mail || ""是为了避免初始状态下data为空对象导致的undefined报错

2. 升级handleChange函数支持嵌套字段 #

修改函数逻辑，通过判断name里的.来处理嵌套更新，不用额外变量：

const handleChange = (e) => {
  const { name, value } = e.target;
  setInputData(prev => {
    // 如果是嵌套字段（含.）
    if (name.includes('.')) {
      const [parentKey, childKey] = name.split('.');
      return {
        ...prev,
        [parentKey]: {
          ...prev[parentKey],
          [childKey]: value
        }
      };
    }
    // 普通顶层字段
    return { ...prev, [name]: value };
  });
};

完整修改后的代码 #

const data = {object_type: "person", name: "", object_code: "", data: {}}
const [inputData, setInputData] = useState(data)

const handleChange = (e) => {
  const { name, value } = e.target;
  setInputData(prev => {
    if (name.includes('.')) {
      const [parentKey, childKey] = name.split('.');
      return {
        ...prev,
        [parentKey]: {
          ...prev[parentKey],
          [childKey]: value
        }
      };
    }
    return { ...prev, [name]: value };
  });
}

const handleSubmit = (e) => {
  e.preventDefault();
  axios.post(url, inputData)
    .then((response)=> {
      console.log(response)
    })
}

<form onSubmit={handleSubmit}>
  <label htmlFor="name">
    Имя
    <input id="name" type="text" name="name" value={inputData.name} onChange={handleChange}/>
  </label>
  <label htmlFor="phone">
    Телефон
    <input id="phone" type="tel" name="object_code" value={inputData.object_code} onChange={handleChange}/>
  </label>
  <label htmlFor="mail">
    Электронный адрес
    <input 
      id="mail" 
      type="email" 
      name="data.mail" 
      value={inputData.data.mail || ""} 
      onChange={handleChange}
    />
  </label>
  <button className="button-create-contact" type="submit">Создать</button>
</form>

逻辑说明 #

• 当输入框的name是data.mail时，函数会拆分出父键data和子键mail，通过解构复制原有的data对象，再更新mail字段，保证React状态的不可变性。
• 普通字段（如name、object_code）依然按原有逻辑处理，无需额外修改。

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