（React JS）将元素推入useEffect函数内的数组的问题答案

【问题标题】：(React JS) problem with pushing elements into an array inside useEffect function（React JS）将元素推入useEffect函数内的数组的问题
【发布时间】：2021-10-17 13:49:37
【问题描述】：

您好，我是使用 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

有人可以帮助找出这段代码中发生的事情吗？

【问题讨论】：

标签： javascript reactjs push

【解决方案1】：

这是两个问题的重复。

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

useState set method not reflecting change immediately

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

Is Chrome's JavaScript console lazy about evaluating arrays?

【讨论】：

感谢您回答我的问题:) 其实我也认为您提到的第一个问题可能是个问题。但不知道第二个问题。