如何结合axios POST请求使用React Hook useState？类组件迁移后功能不生效

需修改的核心问题如下： #

1. 重置表单逻辑和原类组件不一致
   原类组件请求成功后是把表单重置为初始空值，你的函数组件错误把接口返回的response.data赋值给了表单状态。首先把初始表单值单独抽离为常量，请求成功后重置到初始值即可。
2. 状态更新写法存在闭包隐患
   你当前的setValues直接依赖外部的values变量，在多次连续触发输入更新的场景下可能出现状态更新丢失，改用函数式更新的写法读取最新的前序状态更稳妥。
3. 额外检查项：

• 确保你表单内所有输入框的name属性和values内的字段名完全匹配（大小写、拼写一致），否则输入值无法同步到状态中
• 确认函数组件顶部已经导入axios，否则会抛出未定义错误

修改后的完整代码： #

import axios from 'axios'
import { useState } from 'react'

// 单独抽离初始值，和原类组件的startValue逻辑一致
const startValue = {
  brand: "",
  model: "",
  date: "",
  price: "",
  img: "",
};

export default function AddShoes() {
  const [values, setValues] = useState(startValue);
  // const [show, setShow] = useState(false);

  const handleSetInputs = (e) => {
    // 改用函数式更新，读取最新的前序状态
    setValues(prevValues => ({ 
      ...prevValues, 
      [e.target.name]: e.target.value 
    }));
  };

  const submitShoes = (event) => {
    event.preventDefault();

    axios.post("http://localhost:8080/api", values)
    .then((response) => {
      if (response.data != null) {
        // 重置为初始空值，和原类组件逻辑对齐
        setValues(startValue);
        alert("added!");
      }
    });
  };
  // 注意这里需要返回你的表单JSX，确保每个输入框都绑定了onChange={handleSetInputs}和对应的name属性
  // 示例输入框写法：<input name="brand" value={values.brand} onChange={handleSetInputs} />
}

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