API返回JSON嵌套致React编辑表单onChange失效问题求助

1. 解嵌套API返回的Payload #

在获取数据时，直接将返回结构中data字段内的内容与status字段合并到顶层状态，保持和原API返回的扁平结构一致：

React.useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await axios.get(`${detailsUrl + selectedRecord.id}`);
      // 合并嵌套的data字段与status到顶层
      setValues({ 
        ...res.data.data, 
        status: res.data.status 
      });
    } catch (error) {
      // 错误响应同样处理嵌套结构
      setValues({ 
        ...error.response.data.data, 
        status: error.response.data.status 
      });
    }
    setLoading(false);
  };
  fetchData();
}, []);

2. 调整表单组件绑定 #

现在values回到扁平结构，直接绑定顶层字段到表单控件：

<Form onSubmit={handleSubmit} >
  <Controls.Input  
      type='text'
      onChange={handleInputChange}
      name='name'
      label='Equipment Name'
      value={values.name || ''}
  /> 
  <Controls.Input  
      type='text'
      onChange={handleInputChange}
      name='dimensions'
      label='Equipment Dimensions'
      value={values.dimensions || ''}
  />  
  <Button
      type='submit'
      text='Submit'
      onClick={handleSubmit}
   />
</Form>

3. 修复表单验证逻辑 #

更新验证函数，针对顶层字段进行校验：

const validate = (fieldValues = values) => {
  const temp = { ...errors };
  if ('name' in fieldValues) { 
      temp.name = fieldValues.name ? '' : 'Equipment Name is required.';
  }
  if ('dimensions' in fieldValues) {
    temp.dimensions = fieldValues.dimensions ? '' : 'Dimensions are required.';
  }
  setErrors({ ...temp });
  if (fieldValues === values) {
      return Object.values(temp).every(x => x === ''); 
  }
};

4. 提交数据时使用扁平结构 #

提交接口时直接传递顶层的name和dimensions字段，无需嵌套：

const handleSubmit = async (e) => {
  e.preventDefault();
  if (validate()) {
    try {
      await axios.post(submitUrl, {
        name: values.name,
        dimensions: values.dimensions
      });
      // 提交成功后的后续逻辑（如提示、页面跳转等）
    } catch (error) {
      // 错误处理逻辑
    }
  }
};

以上修改后，表单的onChange事件会正确更新对应字段，不会再出现新增data.name这类顶层字段的问题，同时完全适配新API的返回结构，且满足提交时无需嵌套的要求。

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