React使用wpapi发起POST请求创建WP文章时ACF字段值为null

架构老林

2026-8-26

问题根因

你安装的ACF to REST 3.3.3版本接口校验逻辑不支持嵌套在acf/fields对象里传自定义字段，这类嵌套参数会被接口直接过滤，因此返回201创建成功但字段值全为null。你之前试的fields对象传参是另一款同功能插件ACF to WP API的规则，和当前安装的插件不兼容。
WPAPI实例默认没有注册ACF扩展路由，无法自动适配ACF字段的更新逻辑。
列表渲染时字段取值路径错误，ACF to REST返回的自定义字段是挂在文章对象的acf属性下，不是顶级字段。
代码存在两处逻辑bug：import WPAPI语句缺失闭合引号；外层try/catch无法捕获内部async函数抛出的错误，会导致请求失败时loading状态一直卡住。

修复步骤

第一步：修正WPAPI实例初始化代码，注册ACF路由支持，修复语法笔误

import WPAPI from "wpapi"; // 补全原代码缺失的闭合引号

const [name, setName] = useState("");
const [date, setDate] = useState("");
const [meal, setMeal] = useState("");

const wp = new WPAPI({
    endpoint: "https://someurl.com/wp-json",
    username: "......",
    password: "..........",
});
// 注册ACF自定义更新路由，兼容老版本ACF to REST插件
wp.acf = wp.registerRoute("wp/v2", "/posts/(?P<id>[\\d]+)/acf", {
    update: {
        method: "POST",
        params: ["id"]
    }
});

第二步：修正文章创建请求的传参格式，把ACF字段放在请求体顶级位置，补全错误捕获逻辑

const handleSubmit = (e) => {
    e.preventDefault();
    if (name && meal && date) {
      setSpinner(true);
      const createPost = async () => {
        try {
          // 先创建基础文章，ACF字段与title、content平级传入
          const newPost = await wp.posts().create({
            title: name,
            content: meal,
            categories: [188],
            status: "publish",
            name_provider: name,
            meal_provider: meal,
            date_provider: date,
          });
          // 兜底逻辑：如果顶级传参未生效，调用单独注册的ACF路由强制更新字段
          await wp.acf().update({
            id: newPost.id,
            name_provider: name,
            meal_provider: meal,
            date_provider: date
          });
          // 拉取分类下最新文章列表
          const response = await wp.posts().categories(188).embed();
          setSignupPosts(response);
          setName("");
          setMeal("");
          setDate("");
          setSpinner(false);
        } catch (error) {
          setSpinner(false);
          console.log("ERROR: ", error);
        }
      };
      createPost();
    } else {
      console.log("You must fill out all three fields");
    }
};

第三步：修正列表渲染的字段取值路径，从acf属性下读取字段值

<tr key={index}>
  <td className='sign-up'>{item.acf?.name_provider}</td>
  <td
    dangerouslySetInnerHTML={{ __html: item.acf?.meal_provider || "" }}
    className='sign-up'
  />
  <td
    dangerouslySetInnerHTML={{ __html: item.acf?.date_provider || "" }}
    className='sign-up'
  />
  <td>
    <button
      className='btn btn-sm btn-primary'
      style={{ margin: 0 }}
      onClick={() => setEditItem(true)}>
      Edit
    </button>
    <button
      className='btn btn-sm btn-primary'
      onClick={() => {
        toggle();
        setItemId(item.id);
      }}>
      Delete
    </button>
  </td>
</tr>

第四步：后端配置校验（上述代码改完仍不生效时检查）
- 登录WordPress后台，打开ACF字段组配置，确认三个字段的位置规则确实覆盖ID为188分类下的文章，没有额外的用户权限限制
- 打开ACF to REST插件设置页，确认三个字段都勾选了「允许REST API编辑」，没有被设置为只读

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