Arrays 单击“下一步”按钮后如何显示下一个数据

我正在获取一个json文件，该文件在页面加载时已成功显示。我需要在按下下一步按钮后显示下一项

假设db.json：

{ 
  "person": [
    {
      "name": "John",
      "occupation": "band-member" 
    },
    {
      "name": "Paul",
      "occupation": "band-member" 
    },
    {
      "name": "George",
      "occupation": "band-member" 
    },
    {
      "name": "Ringo",
      "occupation": "band-member" 
    },
  ]
}

import React，{useState，useffect}来自“React”；
const主页=（）=>{
const[count，setCount]=useState（0）；
const[name，setName]=useState（[]）；
useffect（（）=>{
设置计数（0）；
getNames（）；
//eslint禁用下一行
}, []);
常量handleNextItem=（）=>{
设置计数（计数+1）；
console.log（名称[计数]）；
};
const getNames=async（）=>{
const res=等待获取（'/person'）；
const data=wait res.json（）；
集合名（数据）；
};
返回(
下一个
{/*{name}{'}{occulation}--其中应显示下一个第一个和下一个项目*/}
);
};
导出默认主页；

我需要关于reactjs map（）的进一步帮助。谢谢。

试试这个：

import React，{useState，useffect}来自“React”；
const主页=（）=>{
const[count，setCount]=useState（0）；
const[name，setName]=useState（[]）；
常量[activeName，setActiveName]=useState（null）
useffect（（）=>{
设置计数（0）；
getNames（）；
//eslint禁用下一行
}, []);
常量handleNextItem=（）=>{
setActiveName（名称[计数+1]）；
设置计数（计数+1）；
console.log（名称[计数]）；
};
const getNames=async（）=>{
const res=等待获取（'/person'）；
const data=wait res.json（）；
集合名（数据）；
setActiveName（数据[计数]）；
};
返回activeName(
下一个
{activeName.name}
)：null；
};
导出默认主页；

您好，谢谢，这一个可以工作，但我需要在加载组件后显示第一个项目。是否可以使用useEffect设置此选项？如果是的话，怎么办？

import React, { useState, useEffect } from 'react';

const HomePage = () => {
    const [count, setCount] = useState(0);
    const [name, setName] = useState([]);

    useEffect(() => {
        setCount(0);
        getNames();
        // eslint-disable-next-line
    }, []);

    const handleNextItem = () => {
        setCount(count + 1);
        console.log(name[count]);
    };

    const getNames = async () => {
        const res = await fetch('/person');
        const data = await res.json();
        setName(data);
    };

    return (
        <div>
            <button onClick={handleNextItem}>Next</button>
            {/* <span>{name}{' '}{occupation}</span>  ---Where the next first and next items should be displayed  */}
        </div>
    );
};

export default HomePage;