NextJS中Axios无法获取更新后的useState数据问题

问题分析 #

1. 表单编码类型与Axios请求格式不兼容：
   表单设置了encType="multipart/form-data"，但Axios默认以JSON格式发送请求体。如果后端期望接收form-data类型参数，会无法解析新提交的数据，导致更新失败——返回200状态码但数据仍为初始值。

2. name状态初始类型错误：
   name初始状态设为数组[]，但输入框绑定的是字符串值，类型不匹配可能引发状态更新的潜在异常。

3. Patch请求未携带完整更新字段：
   当前仅发送name字段，忽略了occupation、paragraph、date等其他编辑字段，无法完成完整数据更新。

修复步骤 #

1. 适配multipart/form-data格式发送请求 #

如果需要上传图片，必须用FormData封装所有数据，让后端能正确解析：

const submitHandle = (e) => {
    e.preventDefault();
    const formData = new FormData();
    // 添加文本字段
    formData.append('name', name);
    formData.append('occupation', occupation);
    formData.append('bio', paragraph);
    formData.append('join', date);
    // 添加图片文件（如果已选择）
    const fileInput = document.querySelector('input[type="file"]');
    if (fileInput.files?.[0]) {
        formData.append('image', fileInput.files[0]);
    }

    axios.patch(`http://localhost:5000/members/${id}`, formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
    .then((res) => {
        console.log(res);
        router.push('/members'); // 成功后跳转回列表页
    })
    .catch(err => console.error(err));
}

2. 修正name状态的初始类型 #

将name初始状态改为空字符串，与输入框值类型保持一致：

const [name, setName] = useState('');

3. 避免无效的初始请求 #

Next.js中router.query.id在客户端路由初始化时可能为空，在useEffect中增加判断，确保id存在后再发起请求：

useEffect(() => {
    if (!id) return;
    const fetchAbout = () => {
        axios.get(`http://localhost:5000/members/${id}`)
        .then((res) => {
            setName(res.data.name);
            setOccupation(res.data.occupation);
            setParagraph(res.data.bio);
            setDate(res.data.join);
        })
        .catch((err) => console.log(err));
    }
    fetchAbout();
}, [id]);

4. 优化取消按钮跳转逻辑 #

用Next.js的router.push代替window.location，保持客户端路由一致性：

const cancelHandler = () => {
    router.push('/members');
}

额外检查点 #

• 确认后端PATCH接口支持解析multipart/form-data格式参数；
• 打开浏览器网络面板，查看Patch请求的Form Data是否包含更新后的字段值，验证数据是否正确发送；
• 在submitHandle中先console.log(id)，确认URL中的id参数正确。

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