(React JS) 将元素推入 useEffect 函数内的数组时出现问题

Question

你好，我是 React JS 编程的新手，目前正面临着这方面的麻烦。它是关于将元素推入数组

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

import 'firebase/database';
import firebase from 'firebase';

import RenderTweet from './RenderTweet';
import RenderReply from './RenderReply';

export default function HomeTweet() {

    const [tweets, setTweets] = useState([])
    const [authUser, setAuthUser] = useState(JSON.parse(localStorage.getItem('authUser')));
    const [tweetList, setTweetList] = useState([])
    const sortTweetsByTime = (tweets) => {

        tweets.sort(function compare(a, b) {
            var temp1 = new Date(a.date)
            var temp2 = new Date(b.date)
            return temp2 - temp1
        })

        return tweets;
    }

    useEffect(() => {
        let temp = []
        firebase.database().ref('users/' + authUser.uid + '/following').once('value').then(function (snapshot) {
            snapshot.forEach(element => {
                firebase.database().ref('users/' + element.key + '/tweets').once('value').then(function (tweets) {
                    tweets.forEach(tweet => {
                        temp.push({
                            "ref": tweet.ref,
                            "date": tweet.val().date
                        })
                    })
                })
            })
        })
        firebase.database().ref('users/' + authUser.uid + '/tweets').once('value').then(function (snapshot) {
            snapshot.forEach(tweet => {
                temp.push({
                    "ref": tweet.ref,
                    "date": tweet.val().date
                })
            })

        })
        setTweets(temp)

        console.log(temp) //first log
        console.log(temp[0]) //second log
        // tweets.forEach(tweet => {
        //     temp2.push(
        //         <RenderTweet tweetRef={tweet.ref} />
        //     )

        // })
        // setTweetList(temp2)

    }, [])


    return (
        <div className="container-fluid" >
            {/* {tweetList} */}


        </div>
    )
}

在第一个日志中，它打印出 temp 包含成功推送元素的数组。（长度：4）但在第二个日志中，它打印出 undefined

log screenshot

有人可以帮助找出这段代码中发生了什么吗？

Answer 1

这是两个问题的重复。

你的数组是空的并且temp[0]是未定义的，因为react useState不是同步的，更新不会生效，直到你的函数组件被评估下一次：

你的第一个 console.log 显示数据是因为你，一个人，在你的功能组件被重新评估并且 useState 生效之前没有检查控制台中的值：

Is Chrome's JavaScript console lazy about evaluating arrays?

(React JS) 将元素推入 useEffect 函数内的数组时出现问题

(React JS) problem with pushing elements into an array inside useEffect function

javascript

push

reactjs