React JS Map 只渲染一个元素

Question

我有一个对象数组，它们应该作为道具传递给一个元素以呈现每个对象的列表，但是当我尝试代码时，只有一个它呈现，而其他的被忽略，即使我有 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 在下一次渲染之前永远不会更新，这意味着您实际上是像这样调用函数：setMethod([...[], dataObject]) 每次迭代。

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

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

功能更新确保之前的状态与之前对setMethod的任何调用都是最新的。

另见why-calling-react-setstate-method-doesnt-mutate-the-state-immediately。