Question

这是我的代码，我希望从Firestore获取关注者数据，然后从doc id获取用户，但是我在控制台日志中获取数据，但数据在首次呈现时未显示，而是在我第二次单击该选项卡以呈现数据，并且正确的关注者用户显示有人可以告诉我我做错了吗？

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>
    )
}

Answer 1

我假设以下代码db.collection("users").doc(doc.data().followerId).get()是异步的，因此setfollowers(data)将在这些承诺被解决之前发生，因此数据将为空，您必须等待所有承诺被解决然后再设置状态，可以在这种情况下使用Promise.All。

反应状态数据未显示在第一个组件上

1 个答案: