useState 的问题（使用渲染复制数组） - ReactJS

Question

我正在尝试使用 State 加载一些数据（这正在工作），但我想填充一个数组，因为我将这些数据分区。

这是我的代码：

const PokemonList = (props) => {
    const [search, setSearch] = useState('');
    const dispatch = useDispatch();
    const pokemonList = useSelector(state => state.PokemonList);
    const [page, setPage] = useState(1);

    React.useEffect(() => {
        FetchData({page: page})}, []);
    
    const FetchData = (page) => {
        dispatch(GetPokemonList(page));}

    React.useEffect(()=> {
        window.addEventListener("scroll", isScrolling);
            return () => window.removeEventListener("scroll", isScrolling);}, [pokemonList]);

    function isScrolling(){
        if(window.innerHeight + document.documentElement.scrollTop!==document.documentElement.offsetHeight){
            return;
        } else {
            console.log("scrolling down");
            const newPage = page + 1;
            const maxPage = Math.round(pokemonList.count / 20);
            if (page < maxPage) {
                setPage(page + 1);
                FetchData(page);
            }
        }
    }

基本上，我使用 API 加载 20 个数据，然后显示这 20 个数据。如果我想要更多 20，我只能显示最新的 20（因为状态更新，它不会累积）。我正在尝试创建一个数组来填充这些数据，但是每次我填充数组时，它都会复制我的数据，因为渲染......我试图构建一个：

pokemonList.data.map(el => el.data.push(pokemons))

它曾经可以工作，但它复制了所有内容:(

Answer 1

我不太了解您的代码（抱歉，ReactJS Rookie），但要将数据累积到以前的状态，您必须执行以下操作：

setState([...state, newState]) 这意味着，首先您必须传播以前的状态，然后添加从 API 获取的新状态