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

Question

我正在获取一个在页面加载时成功显示的 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, 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;

我需要有关 reactjs map() 的进一步帮助。谢谢。

Answer 1

试试这个：

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

const HomePage = () => {
    const [count, setCount] = useState(0);
    const [name, setName] = useState([]);
    const [activeName, setActiveName]= useState(null)
    
    useEffect(() => {
        setCount(0);
        getNames();
        // eslint-disable-next-line
    }, []);
    
    const handleNextItem = () => {
        setActiveName(name[count + 1]);
        setCount(count + 1);
        console.log(name[count]);
    };
    
    const getNames = async () => {
        const res = await fetch('/person');
        const data = await res.json();
        setName(data);
        setActiveName(data[count]);
    };
    
    return activeName ? (
        <div>
            <button onClick={handleNextItem}>Next</button>
            <span>{activeName.name}</span>
        </div>
    ) : null;
};

export default HomePage;