javascript - 如何在单击按钮时加载更多页面

Question

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

const Url = "https://rickandmortyapi.com/api/episode/"

function Episodes() {
const [wholeData, setWholeData] = useState({})
useEffect(() => {
    axios.get(Url).then(res => {
        setWholeData(res.data)
    })
}, [])

const { info, results: defaultR = [] } = wholeData;
const [results, setResults] = useState(defaultR)
const [page, setPage] = useState({
    ...info,
    current: Url
})
const {current} = page

useEffect(() =>{
    if(current === Url) return;

    const request = () =>{
        axios.get(current).then(res => {
            const nextData = res.json();

            setPage({
                current,
                ...nextData.info
            });

            if (!nextData.info?.prev){
                setResults(nextData.results);
                return;
            }

            setResults(prev => {
                return [...prev, ...nextData.results]
            });  })
    }
    request();
}, [current])

const handleLoadMore = () =>{
    setPage(prev => {
        return{
            ...prev,
            current:page?.next
        }
    })
}
}


return (
        <div>
            <div>
                <form /* onSubmit={searchEpisode}*/>
                    <input className="form-control mt-4" type="text"
                        placeholder="Name of the Episode.." aria-label="Search" style={{ width: "50%", margin: "auto" }} /*onChange={searchIt} */ />
                </form>
            </div>
            <div className="row mx-auto text-light">
                {
                    results.map(item => {
                        return (
                            <div key={item.id} className="col-md-3">
                                <div className="card mt-3 mb-2 mx-auto" style={{ width: "18rem" }}>
                                    <div className="card-body">
                                        <h5 className="card-title text-dark">{item.id}. {item.name}</h5>
                                        <h6 className="card-subtitle mb-3 text-muted">{item.episode}</h6>
                                        <li href="#" className="text-muted">{item.air_date}</li>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                    )}
            </div >
            <button onClick={handleLoadMore}>LoadMore</button>
        </div>
    )
}

export default Episodes

我需要在一个页面中渲染 Rick and Morty 的 41 集，因为默认的前 20 集将被渲染，并且在单击按钮时，我需要使用 info 属性中的 API 渲染其余的集。但我收到这样的错误

未捕获（承诺中）类型错误：无法读取未定义的属性“协议”

标签： javascripthtmljsonreactjsapi