如何使用Axios提交嵌套JSON对象？基于React与WordPress REST API

我来帮你把这个更新用户信息的Redux action补全并适配WordPress REST API的要求，毕竟WordPress的API有一些特定规则需要注意，咱们一步步来：

首先得明确WordPress REST API更新用户的几个核心规则：

• 更新用户要用 PUT 请求（POST 是用来创建新用户的）
• 端点格式是 /wp-json/wp/v2/users/{user_id}
• 用户字段是下划线命名（比如 first_name、last_name，和你传入的 firstname/lastname 需要对应转换）
• 必须携带有效的认证信息，否则会返回401未授权

下面是完整的action实现，我还加了状态管理和错误处理：

export const updateUserInfo = (userInfo) => async (dispatch, getState, api) => {
  // 先把表单字段转换成WordPress要求的格式
  const formattedUserInfo = {
    first_name: userInfo.firstname,
    last_name: userInfo.lastname
    // 如果还要更新其他字段（比如简介），可以在这里添加，比如 description: userInfo.bio
  };

  try {
    // 触发请求开始的状态，方便组件显示加载动画
    dispatch({ type: 'UPDATE_USER_REQUEST' });

    // 从Redux状态里获取当前用户ID（假设你的auth模块存了用户信息）
    const userID = getState().auth.user.id;
    // 发送PUT请求到WordPress API
    const response = await api.put(`/wp/v2/users/${userID}`, formattedUserInfo, {
      headers: {
        // 如果用JWT认证，这里要带token；如果是同域用cookie认证可以省略这个头
        'Authorization': `Bearer ${getState().auth.token}`,
        'Content-Type': 'application/json'
      }
    });

    // 请求成功后，更新Redux里的用户信息
    dispatch({
      type: 'UPDATE_USER_SUCCESS',
      payload: response.data
    });

    return response.data; // 可以返回给组件做后续提示
  } catch (error) {
    // 捕获错误并更新状态
    const errorMsg = error.response?.data?.message || '更新用户信息失败，请稍后重试';
    dispatch({
      type: 'UPDATE_USER_FAILURE',
      payload: errorMsg
    });

    throw error; // 抛出错误让组件捕获处理
  }
};

关键细节说明 #

• 字段映射：一定要把你的表单字段（firstname/lastname）转换成WordPress的下划线命名格式，不然API会识别不到字段
• 认证方式：如果是前后端分离的应用，推荐用JWT认证，需要在请求头里携带Authorization: Bearer {token}；如果是同域部署，WordPress的cookie认证会自动生效
• 状态管理：添加UPDATE_USER_REQUEST/SUCCESS/FAILURE这三个action类型，组件可以根据这些状态显示加载、成功提示或者错误信息

最后给你一个组件里使用这个action的示例：

import { useDispatch, useSelector } from 'react-redux';
import { updateUserInfo } from '../actions/userActions';
import { useState } from 'react';

const UserProfileForm = () => {
  const dispatch = useDispatch();
  const { user } = useSelector(state => state.auth);
  const [formData, setFormData] = useState({
    firstname: user.first_name || '',
    lastname: user.last_name || ''
  });
  const { loading, error } = useSelector(state => state.userUpdate);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await dispatch(updateUserInfo(formData));
      alert('用户信息更新成功！');
    } catch (err) {
      // 这里可以根据Redux里的错误信息做提示
      alert(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <p style={{color: 'red'}}>{error}</p>}
      <input
        type="text"
        name="firstname"
        value={formData.firstname}
        onChange={(e) => setFormData({...formData, firstname: e.target.value})}
        placeholder="名字"
        disabled={loading}
      />
      <input
        type="text"
        name="lastname"
        value={formData.lastname}
        onChange={(e) => setFormData({...formData, lastname: e.target.value})}
        placeholder="姓氏"
        disabled={loading}
      />
      <button type="submit" disabled={loading}>
        {loading ? '更新中...' : '更新信息'}
      </button>
    </form>
  );
};

export default UserProfileForm;

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