在 Next.js 中使用高级自定义字段重复字段

Question

我很难在我的 Next.js 项目中使用 ACF 转发器字段。我有一个带有子字段的转发器字段的块，我可以获取数据，但是我不确定如何将其放入循环中。

这是我的 js 文件：

export default function TableOfContents(attributes) {

    //Collect Data from Block
    const parsedData = JSON.parse(attributes.attributesJSON).data;

    //Count number of rows (returns 3)
    const number = parsedData.rows;

    //Create Array called Table to allow me to loop through 3 times
    const Table = [...Array(number)];

    return (
        <section className={styles.tableOfContentsBlock}>
            <p className="SBH5">Contents</p>
            <ul>
                //Array to loop through, invalid as placeholder and index as number
                {Table.map((invalid, index) => {

                    //Set field name (should return 'rows_0_title', then 'rows_1_title' etc)
                    const row = 'rows_' + index + '_title';
                    const all = parsedData;

                    return (
                    <li>
                        {/* Return field name as value */}
                        {/* <a href="#" className=''>{parsedData.rows_0_title}</a> */}
                        <a href="#" className=''>Title Goes Here</a>
                    </li>
                    )
                })}
            </ul>
        </section>
    )
}

当我 console.log parsedData 我得到以下信息：

rows: 3
rows_0_anchor: "what-is-image-resolution"
rows_0_title: "What is image resolution?"
rows_1_anchor: "why-is-image-resolution-important"
rows_1_title: "Why is image resolution important?"
rows_2_anchor: "What-image-resolution-should-I-use"
rows_2_title: "What image resolution should I use?"
_rows: "field_6203e67f1c991"
_rows_0_anchor: "field_6203e6951c993"
_rows_0_title: "field_6203e68b1c992"
_rows_1_anchor: "field_6203e6951c993"
_rows_1_title: "field_6203e68b1c992"
_rows_2_anchor: "field_6203e6951c993"
_rows_2_title: "field_6203e68b1c992"
[[Prototype]]: Object

如您所见，我需要遍历字段以替换中间的数字，但它不起作用，它只是 returns 一个空白标签。

Answer 1

访问 parsedData 字段时必须使用 row 变量作为键。

export default function TableOfContents(props) {
    const parsedData = JSON.parse(props.attributesJSON).data;
    const number = parsedData.rows;
    const table = [...Array(number)];

    return (
        <section className={styles.tableOfContentsBlock}>
            <p className="SBH5">Contents</p>
            <ul>
                {table.map((_, index) => {
                    const row = `rows_${index}_title`;
                    const anchor = `rows_${index}_anchor`;

                    return (
                        <li key={row}>
                            <a href={`#${parsedData[anchor]}`} className="">
                                {parsedData[row]}
                            </a>
                        </li>
                    );
                })}
            </ul>
        </section>
    )
}

在 Next.js 中使用高级自定义字段重复字段

Using Advanced Custom Fields Repeater Field in Next.js

wordpress

reactjs

advanced-custom-fields

next.js