对console.log上显示的本机数据做出反应，但不在屏幕上

Posted 2023-03-29

【中文标题】对console.log上显示的本机数据做出反应，但不在屏幕上

【英文标题】：react native data show on console.log but not on screen

【发布时间】：2021-07-22 01:40:06

【问题描述】：

有时应用运行良好。 但我不知道为什么，有时来自 firebase 的数据给我空白屏幕而不是数据。 在我重新打开应用程序后它就可以工作了。

例如， 我的页面之一：

useEffect( () => 
        const subscriber =  firestore()
          .collection('Trails')
          .onSnapshot(querySnapshot =>  //const querySnapshot = await firebase.firestore().collection('users').get();
            const trails = [];
            console.log('subscribe')
            if (querySnapshot)
              querySnapshot.forEach(async documentSnapshot => 
                trails.push(
                  ...documentSnapshot.data(),
                  key: documentSnapshot.id,

                );
                console.log("trails test", trails)
                
              );

            
            setTrails(trails);
            setLoading(false);
          );
        return () => subscriber();
      , []);

我使用 useEffect 从数据库中获取数据然后显示它，同样 - 有时给我空白，有时效果很好。

我想发布应用程序，但我对这个错误不满意？

对不起我的英语，我什至不知道如何更好地描述这个问题。

请有人指导我完成吗？也许我的 useEffect 效果不好？

【参考方案1】：

我认为你应该使用调试。

React native documentation

*** question

【参考方案2】：

我认为在卸载组件时调用 useEffect return 中的 return 存在问题。这是我如何处理异步数据获取的示例：

...
const [data, setData] = useState([]);

const isCurrentView = useRef(true);

useEffect(() => 
  if (isCurrentView.current === true) 

    const asyncFetch = async () => 
      const response = await fetch(...something) //here some Asynchronous Call Like(axios, fetch)
      setData([...response]);
    ;

    asyncFetch();
  

  return () => 
    isCurrentView.current = false;
  ;
, []);
...

我不是 100% 确定这是否是最好的方法，但我在一些地方看到过类似的代码，所以我添加了这个。

【讨论】：

谢谢，我会试试这个，这个问题也出现在标记上，但是一旦用户重新启动应用程序它就可以工作了：

它获取，出现然后消失（就像我做了两次 asyncFetch() 一样？）

【参考方案3】：

问题已解决： setTrails 在范围内，它不断刷新空数据。

querySnapshot.forEach(async documentSnapshot => 
                trails.push(
                  ...documentSnapshot.data(),
                  key: documentSnapshot.id,

                );
              setTrails(trails);  // <<<~~~~ put the set in this scope.
            );
              setLoading(false);
          );