wp api React 不会在 POST 请求上创建 ACF 字段答案

【问题标题】：wp api React will not create ACF Fields on a POST requestwp api React 不会在 POST 请求上创建 ACF 字段
【发布时间】：2022-07-23 07:41:01
【问题描述】：

我正在使用 wpapi 2.2.1 开发一个 react 17.0.2 应用程序。在前端。在 WordPress 后端，我使用 Advanced Custom Fields 插件 5.12.2 以及 ACF to REST 插件 3.3.3。

我创建了一些与基于某个类别的帖子相关联的 ACF 字段。

在前端，在我的 handleSubmit 方法内部，我使用 wpapi 文档 https://www.npmjs.com/package/wpapi#creating-posts 中的 create 方法。我可以从头到尾创建新的 WordPress 帖子，包括所有标准 WP 字段，如标题、内容、摘录等……但是当我尝试为 ACF 字段创建新值时，它不起作用。我得到的只是null 值。这是我的代码。

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: \"..........\",
  });

在表单提交中我的handleSubmit 方法内

const handleSubmit = (e) => {
    e.preventDefault();

    if (name && meal && date) {
      try {
        setSpinner(true);
        const createPost = async () => {
          await wp
            .posts()
            .create({
              title: name,
              content: meal,
              acf: {
                name_provider: name,
                meal_provider: meal,
                date_provider: date,
              },
              categories: [188],
              status: \"publish\",
            })
            .then(async () => {
              const response = await wp.posts().categories(188);
              setSignupPosts(response);
              setName(\"\");
              setMeal(\"\");
              setDate(\"\");
              setSpinner(false);
            });
        };
        createPost();
      } catch (error) {
        console.log(\"ERROR: \", error);
      }
    } else {
      console.log(\"You must fill out all three fields\");
    }
  };

这里是 JSX

<div className=\'container\'>
   <form onSubmit={handleSubmit}>
      <div className=\'form-group\'>
         <label htmlFor=\'exampleInputEmail1\'>Name</label>
         <input
            type=\'text\'
            className=\'form-control\'
            id=\'name\'
            aria-describedby=\'emailHelp\'
            placeholder=\'Name\'
            value={name}
            onChange={(e) => setName(e.target.value)}
         />
      </div>
      <div className=\'form-group\'>
         <label htmlFor=\'exampleInputPassword1\'>Meal</label>
         <input
            type=\'text\'
            className=\'form-control\'
            id=\'meal\'
            placeholder=\'Meal\'
            value={meal}
            onChange={(e) => setMeal(e.target.value)}
         />
      </div>
      <div className=\'form-group\'>
         <label htmlFor=\'exampleInputPassword1\'>Select Date</label>
         <input
            type=\'date\'
            className=\'form-control\'
            id=\'date\'
            placeholder=\'Select Date\'
            value={date}
            onChange={(e) => setDate(e.target.value)}
         />
      </div>
      <button type=\'submit\' className=\'btn btn-primary\'>
      Submit
      </button>
      {spinner ? (
      <Spinner color=\'dark\' type=\'grow\' style={{ margin: \"0px 0px -7px 10px\" }} />
      ) : null}
   </form>
   <div className=\'table-responsive\'>
      <table className=\'table table-striped\' style={{ marginTop: \"50px\" }}>
      <thead>
         <tr>
            <th scope=\'col\'>Name</th>
            <th scope=\'col\'>Meal</th>
            <th scope=\'col\'>Date</th>
            <th>Edit</th>
         </tr>
      </thead>
      <tbody>
         {!signupPosts
         ? null
         : signupPosts.map((item, index) => {
         return (
         <tr key={index}>
            <td className=\'sign-up\'>{item.name_provider}</td>
            <td
               dangerouslySetInnerHTML={{ __html: item.meal_provider }}
               className=\'sign-up\'
               />
            <td
               dangerouslySetInnerHTML={{ __html: item.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>
         );
         })}
      </tbody>
      </table>
   </div>
</div>

如您所见，问题出在此处。发布成功并返回 201 响应，但 acf 字段返回 null。

const createPost = async () => {
          await wp
            .posts()
            .create({
              title: name,
              content: meal,
              fields: {
                name_provider: name,
                meal_provider: meal,
                date_provider: date,
              },
              categories: [188],
              status: \"publish\",
            })
            .then(async () => {
              const response = await wp.posts().categories(188);
              setSignupPosts(response);
              setName(\"\");
              setMeal(\"\");
              setDate(\"\");
              setSpinner(false);
            });
        };

我还尝试使用基于此帖子How do I update Advanced Custom Fields on Wordpress with node-WPAPI? 的fields 密钥，但无济于事。

这是我从服务器返回的响应。如您所见，acf 值为 null

[
  {
    \"id\": 10757,
    \"title\": {
      \"rendered\": \"Some Title\"
    },
    \"content\": {
      \"rendered\": \"<p>Pasta</p>\\n\",
      \"protected\": false
    },
    \"excerpt\": {
      \"rendered\": \"<p>Pasta</p>\\n\",
      \"protected\": false
    },
    \"author\": 11,
    \"categories\": [
      188
    ],
    \"acf\": {
      \"name_provider\": null,
      \"meal_provider\": null,
      \"date_provider\": null
    },
    ......
  }
]

我只是想不通我做错了什么。任何帮助，将不胜感激。

标签： reactjs wordpress advanced-custom-fields wp-api

【解决方案1】：

我想通了，我觉得自己像个白痴。在您的 ACF 字段组中，在您的 WordPress 后端中，您必须设置属性“在 REST API 中编辑？”到“是”。一旦我这样做了，它就开始发布到 ACF 字段。

【讨论】：