React.js 中的 AFC 中继器和 wp-rest api

Posted 2023-03-25

【中文标题】React.js 中的 AFC 中继器和 wp-rest api

【英文标题】：AFC Repeater and wp-rest api in React.js

【发布时间】：2021-05-05 02:53:10

【问题描述】：

需要在 react 中渲染 ACF 中继器。我能够显示 ACF 文本字段，但不能显示转发器字段。需要找出是否有人有如何通过转发器字段进行映射的示例。

Repeater 字段组称为 Skills。

【参考方案1】：

我也是这方面的新手，但我会尽力帮助你。

因此，您首先需要下载并安装 ACF 到 REST API 插件，这样您就可以将 ACF 与 Wordpress API 一起使用。我假设您已经拥有它，因为正如您之前所说 - 您可以显示文本字段。

一旦您可以通过 Wordpress API 发送数据，您需要预览 Wordpress 发送的 JSON（在这种情况下），以便显示必要的数据。我的称为 React Developer Tools，我将其安装为 Chrome 扩展。

Link to Chrome store

应该是这样的：

如您所见，我的组件名为 Home.js，您的组件可能会有所不同。选择获取您需要的所有数据的组件。

现在，您只需要使用中继器即可。如果您向我们展示您的代码会容易得多。我真的不知道你通过api调用什么样的数据，所以我猜这些是页面。

 pages[0].acf.technologie_lista.map ( (field, index) => (
     <div key=index className="single-field">
         field.nazwa_technologii 
     </div>
) )  

让我们分解一下。

1 - 我的项目包含两个页面。我选择了第一个，因为只有这个需要 ACF 字段。 technologie_lista 是 acf 字段名称。

2 - 您需要使用地图功能列出所有帖子。您需要为每个元素分配键。

nazwa_technologii 只是一个中继器子字段名称。

仅此而已。我可能会犯一些新手错误，但它对我有用。我希望我有所帮助。干杯！