在每次渲染上多次更改状态的更好方法是什么

Question

使用 useEffect 我正在通过 axios 从不同的 URL 调用一些数据并尝试在每个渲染器上更改 URL，我正在使用状态来更改 URL 并且每当状态改变，URL也会改变，运行使用效果又会不同URL。但是要更改渲染中的状态，我使用的是按钮，我的问题是有什么方法可以更改状态并且运行 API 无需单击按钮即可调用。

import React,{useState,useEffect} from "react";
import axios from "axios";


export default function TrackLoader(accessToken){

    const [number, setNumber] = useState(0);
    const [arrayOfPlayLists, setArrayOfPlayLists] = useState([]);

    const playListIds = ["3d93aG1WkqLxS2q9GkUgXO", "37i9dQZF1DWX3xqQKu0Sgn", "37i9dQZF1DWU13kKnk03AP", "37i9dQZF1DXdPec7aLTmlC", "37i9dQZF1DX889U0CL85jj", "37i9dQZF1DXbVipT9CLvYD"]
    
    useEffect(() =>{
        async function getData(){
            
            const response = await axios.get(`https://api.spotify.com/v1/playlists/${playListIds[number]}`,{
                headers:{
                    Authorization:"Bearer " + accessToken.accessToken,
                },
            })
            let selectedPlayList = response.data
            setplayList(selectedPlayList)
            arrayOfPlayLists.push(selectedPlayList)
        }
        getData();
    },[number]);

    return(
        <div>
            {number ===5? null: <button onClick={()=> setNumber(number+1)}></button>} 
        </div>
    )


}

此外，我还试图将从 API 获得的数据放入一个数组中。对不起我的英语。

Answer 1

您可以使用 setTimeout 添加另一个 useEffect

  useEffect(() => {
    if(number <= 5) {
      setTimeout(() => {
          setNumber(number + 1);
        }, 1000);
    }
  }, [number]);

在每次渲染上多次更改状态的更好方法是什么

What's the better way to change state on every render for number of times

reactjs

use-effect

use-state