React JS Map 只渲染一個元素

Question

我有一個對象數組，這些對象應該作為道具傳遞給一個元素，以便為每個 object 呈現一個列表，但是當我嘗試代碼時，只有一個呈現了它，而其他的被忽略了，即使我已經 console.log 他們和我可以看到他們。 這是代碼：

const mainFilterQueries = ['popular', 'top_rated', 'upcoming']
    const sortByMovies = "movie"
    const [moviesLists, setMoviesLists] = useState([])
    
    
    useEffect(()=>{
        createLists(mainFilterQueries, sortByMovies , setMoviesLists, moviesLists)
        console.log(moviesLists)
    }, [])

    
    async function fetchData(query, sort, setMethod, state){

        let listsCreated = []

        try {
            const response = await fetch(`https://api.themoviedb.org/3/${sort}/${query}?api_key=${apikey}`)
            const data = await response.json();
            let dataObject = {key:`${sort}-${query}`, data:data.results, title:`${query}`}
            console.log(dataObject)
            listsCreated.push(dataObject);
            setMethod([...state, dataObject])

        } catch (error) {
            console.error(error)
        }
    }
    function createLists(arr, sort, target, state){
        arr.forEach(query =>{
            fetchData(query, sort, target, state)
        })
    }
    


    

    


    return (
        <React.Fragment>
            {moviesLists.map(list =>{
            return(
                <div>
                    <MoviesList dataList={list}/>
                </div>
            )  
            })}
        </React.Fragment>
    )

Answer 1

您正在循環中調用setMethod([...state, dataObject]) 。 state在下一次渲染之前永遠不會更新，這意味着您實際上是在調用 function 就好像它是這樣的：每次迭代的setMethod([...[], dataObject]) 。

而是使用setState的功能更新形式，如下所示：

setMethod((prev) => ([...prev, dataObject]))

功能更新確保之前的 state 與之前對setMethod的任何調用都是最新的。

另請參閱為什么調用反應設置狀態方法不改變狀態立即。