Estoy desarrollando una aplicación de reacción 17.0.2 usando wpapi 2.2.1. en el Front End. En el backend de WordPress, estoy usando el complemento Advanced Custom Fields 5.12.2 junto con el complemento ACF to REST 3.3.3.
Creé algunos campos ACF asociados con publicaciones basadas en una determinada categoría.
En la parte delantera, dentro de mi handleSubmit método, estoy usando el create método de los documentos de wpapi https://www.npmjs.com/package/wpapi#creating-posts. Puedo crear nuevas publicaciones de WordPress de adelante hacia atrás, incluidos todos los campos estándar de WP como título, contenido, extracto, etc., pero cuando intento crear nuevos valores para los campos ACF, no funciona. Todo lo que obtengo son null valores. Aquí está mi código.
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: "..........",
});
dentro de mi handleSubmit método desde el envío del formulario
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");
}
};
Y aquí está el 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>
Como puede ver, el problema está en algún lugar aquí. La publicación es exitosa con una respuesta 201 pero los campos acf regresan null.
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);
});
};
También he probado a usar el fields clave basada en esta publicación ¿Cómo actualizo los campos personalizados avanzados en WordPress con node-WPAPI? pero fue en vano.
Aquí está la respuesta que recibo del servidor. Como puedes ver el acf los valores son nulos
[
{
"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
},
......
}
]
Simplemente no puedo entender lo que estoy haciendo mal. Cualquier ayuda sería apreciada.
.