时间戳

首页 > 解决方案 > 状态未更新。我想从 Firestore 中获取数据

reactjs - 状态未更新。我想从 Firestore 中获取数据

问题描述

我已成功从 firestore 检索数据，但无法更新我的状态。请检查代码。

export const TaskContextProvider = (props) => {

    const [Tasks, setTasks] = useState([])

    const { User } = useContext(AuthContext)

    useEffect(() => {
        firebase.firestore()
        .collection("Users")
        .doc(User.id)
        .collection("Tasks")
        .onSnapshot((snapshot) => {
            const newtask = snapshot.docs.map((doc)=>({
                id : doc.id,
                ...doc.data()
            }))
            setTasks(newtask)
            console.log('newtask', newtask)
            console.log('Tasks', Tasks)
        })
    }, [])

以下的控制台输出是

newtask (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Tasks []

标签： reactjsfirebasegoogle-cloud-firestorereact-hooks

解决方案

setTasks是异步的，并且在从设置其新值的同一函数中调用时可能永远不会向您显示正确的值。相反，将其记录在外部useEffect以查看它是否实际上正在更新。然后你会看到每个渲染的console.log。

推荐阅读