React-在侦听器中访问全局范围时不会更新

劳尔

我有一个数据库侦听器,该侦听器必须访问组件属性(可以在组件的整个生命周期内更改)。我的问题是,当我在侦听器的本地范围内时,全局范围内的内容不会更新。例如,假设我有一个道具“ userData”,它首先具有以下形式:

{
   name: "anthony"
}

在未指定的时间后,Add将其字段值更改为“ mark”。

如果我运行此代码:

console.log("Global: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "mark"} OK

const onPostsCollectionUpdate = (snapshot) => {
    /*
      This function gets the initial amount of posts 
      and the new ones that are uploaded in real time.
    */
    console.log("Local: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "anthony"} NOT UPDATED!

    ...
}

 useEffect(() => {
    const { firebase, attachListener } = props;

    // Create a Real-time Database listener
    const postsListener = firebase
      .getDatabase()
      .collection("posts")
      .doc(firebase.getCurrentUser().uid)
      .collection("userPosts")
      .orderBy("date")
      .limitToLast(MAX_POSTS_TO_RETRIEVE_LENGTH)
      .onSnapshot(onPostsCollectionUpdate); // Get the initial amount of posts

    // Attach the listener
    attachListener(postsListener);
  }, []);

我得到这个结果:

全局:{“ name”:“ anthony”}

当地:{“ name”:“ anthony”}

全局:{“ name”:“ mark”}

当地:{“ name”:“ anthony”}

如您所见,在方法“ onPostsCollectionUpdate”内,道具未更新。我也尝试过使用状态变量和相同的结果。

有什么想法为什么会发生这种情况以及如何在侦听器的本地范围内获取最新值?

谢谢。

Wgg12

尝试使用此代码

import React, { useCallback } from 'react';

console.log("Global: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "mark"} OK

const onPostsCollectionUpdate = (snapshot) => {
    /*
      This function gets the initial amount of posts 
      and the new ones that are uploaded in real time.
    */
    console.log("Local: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "anthony"} NOT UPDATED!

    ...
}

const initializeListener = useCallback(() => {
  const { firebase, attachListener } = props;

  // Create a Real-time Database listener
  const postsListener = firebase
    .getDatabase()
    .collection("posts")
    .doc(firebase.getCurrentUser().uid)
    .collection("userPosts")
    .orderBy("date")
    .limitToLast(MAX_POSTS_TO_RETRIEVE_LENGTH)
    .onSnapshot(onPostsCollectionUpdate); // Get the initial amount of posts

  // Attach the listener
  attachListener(postsListener);
}, [props]);

useEffect(() => {
  initializeListener();
}, [initializeListener]);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么更新状态未反映在事件侦听器中:React Native,Hooks

React:与事件侦听器相关的批处理状态更新

套接字侦听器未从 React 状态获取更新

尝试从侦听器触发函数时,在React Native中获取“ setState不是函数”

如何从React Native的EventEmitter实例中删除侦听器?

在React Application中查看/管理Firebase侦听器的数量

react组件中的onDeviceReady事件侦听器

即使使用 useEffect 钩子的返回回调,也不会在 React 中删除事件侦听器

一旦 React 卸载事件侦听器,就不会再次添加事件侦听器的问题

全局范围-触发事件侦听器后访问“ this”

React JS keyDown 侦听器故障

'this'返回键盘侦听器事件中的全局范围

指令中的输入文件更改侦听器不会更新范围变量[已附加plunker]

侦听器中的打字稿访问全局变量

如何在 React 组件实例上使用 onClick 侦听器更新状态挂钩

如何使用useeffect react hook在组件卸载时删除事件侦听器mousedown?

为什么React Native Navigation侦听器在第一次尝试时触发?

在实现google oauth 2.0隐式登录React时,多次触发isSignedIn的侦听器

如何在react js中的材料ui中的列表项上设置单击侦听器

如何将参数从组件传递到 React 中的事件侦听器?

React HOC-将事件侦听器添加到包装的组件中

侦听器未在React中的组件卸载上被删除

为什么即使使用onChange侦听器也无法在React中更改输入值

在React Native中-是否可以在通过道具接收的动画值上添加侦听器?

在React中按类将事件侦听器添加到项目

React Native-剪贴板中更改的侦听器

如何将事件侦听器添加到React Native中的状态

如何取消订阅 React-Native 中的 Firestore 侦听器?

导航侦听器中的react-native导航虚假路由参数