React Native 状态仅在更改代码后更新

q8l4jmvw 于 2022-12-24 发布在 React

关注(0)|答案(1)|浏览(143)

我有一个react原生应用程序，我从firebase firestore数据库中获取用户，它工作正常，但是当我尝试从用户对象中获取关注者长度时，它没有显示或改变，只有当我修改代码和应用程序刷新时才会改变。
我在某处读到useEffect在第二帧上运行，所以我尝试将代码放在useEffect之外，但没有任何变化

const [followingLength, setFollowingLength] = useState(0);
const [followersLength, setFollowersLength] = useState(0);

useEffect(() => {
  const userSub = onSnapshot(doc(firestore, "Users", userId), (doc) => {
            setUser(doc.data())

            if (user.following.length !== 0) {
                setFollowingLength(user.following.length)
            }

            if (user.followers.length !== 0) {
                setFollowersLength(user.followers.length)
            }
        });
});

<Text style={{ color: colors.white }}>{followingLength}</Text>
<Text style={{ color: colors.white }}>{followersLength}</Text>

react-native

来源：https://stackoverflow.com/questions/74844197/state-updates-only-after-changes-are-made-to-the-code

1条答案

按热度按时间

sqserrrh1#

从我所看到的事情来看：
问题1：为什么你的useEffect没有dependency array？在这种情况下，代码将在每个渲染中执行，这将是错误和昂贵的。
问题2：您是否知道setUser不会立即更新user对象，并且您的if中的user是“旧的”并且捕获了闭包？
问题3：你知道onSnapshot返回unsubscribe函数，需要调用这个函数来停止监听器吗？在你的例子中，你在每个渲染中添加了一个额外的监听器，这也是有缺陷的，而且代价很高。
我不能100%肯定这些问题的组合是你的问题的确切来源，但他们肯定应该得到解决
注意：您可以使用useMemo来计算关注和关注者。

const [user, setUser] = useState();
const followingLength = useMemo(() => {
  return user?.following?.length || 0;
}, [user]);

const followersLength = useMemo(() => {
  return user?.followers?.length || 0;
}, [user]);

useEffect(() => {
  const unsubscribe = onSnapshot(doc(firestore, "Users", userId), (doc) => {
    setUser(doc.data());

    // Or
    // const u = doc.data();
    // setUser(u);
    // setWhateverElse from "u", not "user"

  });

  return unsubscribe;
}, [userId]);

赞(0）回复(0）举报 2022-12-24

我来回答

React Native 状态仅在更改代码后更新

1条答案

相关问题

热门标签

最新问答