Данные о состоянии реакции не отображаются при первом рендеринге компонента - PullRequest
Новая
       9

Данные о состоянии реакции не отображаются при первом рендеринге компонента

0 голосов
/ 06 марта 2020

Вот мой код, который я ищу, чтобы получить данные о подписчиках из Firestore и затем выбрать пользователей из идентификатора do c, но я получаю данные в журнале консоли, но данные не отображаются в первый раз, когда компонент рендерится, но когда я нажимаю на вкладку во второй раз, она отображает данные и показывает правильных подписчиков, может кто-нибудь сказать мне, что я делаю неправильно? 

export default function RequestTab() {

    const [followers, setfollowers] = useState(null)

    useEffect(() => {
        if (firebase.auth().currentUser) {
            let data = [];
            db.collection("buddiez")
                .where("followeeId", "==", firebase.auth().currentUser.uid)
                .where("accepted", "==", false)
                .onSnapshot((querySnapshot) => {
                    querySnapshot.forEach((doc) => {
                        db.collection("users").doc(doc.data().followerId).get().then((result) => {
                            data.push({ ...result.data() })
                        });
                    });
                });
            setfollowers(data)
        }
    }, [])

    console.log(followers);

    let userArr = followers ? followers.map((follower, i) => {
        return <div key={i} className="request-details pb-3 border-bottom">
            <div className="noty-usepf-icon">
                <img className="rounded-circle mt-0" style={{ width: "45px", height: "45px" }} src={follower.profilePic ? follower.profilePic : ""} alt="" />
            </div>
            <div className="request-info">
                <h3 className="mb-n1" style={{ fontSize: '1.1rem' }}>{follower.fullName}</h3>
                <span>@{follower.username}</span>
            </div>
            <div className="accept-feat">
                <ul>
                    <li><button type="submit" className="accept-req">Accept</button></li>
                    <li><button type="submit" className="close-req"><i className="la la-close" /></button></li>
                </ul>
            </div>
        </div>
    }) : <h2 className="text-muted p-3 d-flex justify-content-center">No Requests !</h2>

    return (
        <div className="tab-pane show active">
            <div className="acc-setting">
                <h3>Requests</h3>
                <div className="requests-list">
                    {userArr}
                </div>
            </div>
        </div>
    )
}

1 Ответ

0 голосов
/ 06 марта 2020

Я предполагаю, что следующий код db.collection("users").doc(doc.data().followerId).get() является асинхронным c, поэтому setfollowers(data) произойдет до того, как эти обещания будут разрешены, поэтому данные будут пустыми, вам придется подождать, пока все обещания будут разрешены, и затем установить состояние, вы можете используйте Promise.All для этого случая.

...