前端之家

  1. 首页
  2. 问答

状态不会在React Native上更新

• 问答

我正在做我的本机应用程序的通知页面。它具有无限滚动和“拉动刷新”选项。进入它的页面，它也可以刷新。 当我向下滚动时会发生问题，因为它似乎调用服务器来获取新的通知，但没有连接到数组。 

import React,{ useState,useEffect,useCallback,Component } from "react";
import {
  View,Text,flatList,Button,Platform,activityIndicator,StyleSheet,ScrollView,RefreshControl,SafeAreaView,} from "react-native";
import { useSelector,useDispatch } from "react-redux";
import i18n from "i18n-js";
import Colors from "../../constants/Colors";
import { getNotificationList } from "../../utils/NotificationsUtils";
import Card from "../../components/UI/Card";

const NotificationsScreen = (props) => {
  const [refreshing,setRefreshing] = useState(false);
  const [isLoading,setIsLoading] = useState(false);
  const [page,setPage] = useState(0);
  const [notifications,setNotifications] = useState([]);
  const [error,setError] = useState();

  const dispatch = useDispatch();

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    setNotifications([]);
    setPage(0);

    console.log("-- Refreshing --");

    getNotifications().then(() => {
      setRefreshing(false);
    });
  },[dispatch,setRefreshing]);

  const fetchMoreNotifications = useCallback(async () => {
    const newPage = page + 7;
    setPage(newPage);
    console.log(
      "FETCH MORE from page " + newPage + " on array of " + notifications.length
    );

    getNotifications().then(() => {
      setIsLoading(false);
    });
  },getNotifications]);

  const getNotifications = useCallback(async () => {
    setError(null);
    setIsLoading(true);
    try {
      console.log("Get from page " + page);
      // let fromRecord = (page - 1) * 7;
      const retrievedNotifications = await getNotificationList(
        page,7,true,false
      );
      console.log(
        "Setting " +
          retrievedNotifications.response.notifications.length +
          " new notifications on an already existing array of " +
          notifications.length +
          " elements"
      );

      let updatedNews = notifications.concat(
        retrievedNotifications &&
          retrievedNotifications.response &&
          retrievedNotifications.response.notifications
      );
      setNotifications(updatedNews);
    } catch (err) {
      setError(err.message);
    }
    setIsLoading(false);
  },setIsLoading,setNotifications,setError]);

  useEffect(() => {
    setIsLoading(true);
    getNotifications(page).then(() => {
      setIsLoading(false);
    });
  },getNotifications]);

  return (
    <View>
      {error ? (
        <View style={styles.centered}>
          <Text>Error</Text>
        </View>
      ) : refreshing ? (
        <View style={styles.centered}>
          <activityIndicator size="large" color={Colors.primary} />
        </View>
      ) : !notifications || !notifications.length ? (
        <View style={styles.centered}>
          <Text>No data found</Text>
        </View>
      ) : (
        <flatList
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
          }
          data={notifications}
          keyExtractor={(notification) => notification.notificationQueueId}
          onEndReached={fetchMoreNotifications}
          onEndReachedThreshold={0.5}
          initialNumToRender={4}
          renderItem={(itemData) => (
            <View
              style={{
                marginTop: 10,height: 150,width: "100%",}}
            >
              <Card style={{ height: 150,backgroundColor: "white" }}>
                <Text style={{ fontSize: 16,color: Colors.black }}>
                  {itemData.item.text}
                </Text>
              </Card>
            </View>
          )}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  centered: {
    flex: 1,justifyContent: "center",alignItems: "center",},});

export default NotificationsScreen;

如果我滚动到结尾，它将触发“ fetchMoreNotifications”功能，并且可以在控制台中找到它：

FETCH MORE from page 7 on an array of 0
Get from page 0
Setting 7 new notifications on an already existing array of 0 elements
FETCH MORE from page 7 on an array of 0
Get from page 0
Setting 7 new notifications on an already existing array of 0 elements
FETCH MORE from page 7 on an array of 0
Get from page 0
Setting 7 new notifications on an already existing array of 0 elements
...and so on

如您所见，即使以前我保存了通知，它也会显示“ 0个元素的现有数组”。也许useCallback的依赖项有问题？

iCMS 回答：状态不会在React Native上更新

问题：

有2个主要问题，一个是page，另一个是notifications，由于useCallback和dependencies，useCallback函数将始终指向旧值，即直到其中一个要更新的依赖项为止。

1）解决page问题：

将newPage作为参数传递给getNotifications，由于setPage的异步行为，它将不会直接更新

第二次，要获取page的更新值，您可以将page作为依赖项进行传递。

2）解决notification问题的方法：

使用setState(prevState => newState)直接从其上一个状态值更新通知。

解决方案： 

  const fetchMoreNotifications = useCallback(async () => {
    const newPage = page + 7;
    setPage(newPage);
    console.log(
      "FETCH MORE from page " + newPage + " on array of " + notifications.length
    );
    getNotifications(newPage).then(() => { // <---- Pass as param
      setIsLoading(false);
    });
  },[page]); // <---- Add page as dependency 

  const getNotifications = useCallback(
    async page => { // <---- Get page as a param
      setError(null);
      setIsLoading(true);
      try {
        console.log("Get from page " + page);
        // let fromRecord = (page - 1) * 7;
      const retrievedNotifications = await getNotificationList(
        page,7,true,false
      );

      setNotifications(prevNotification => prevNotification.concat(
        retrievedNotifications &&
          retrievedNotifications.response &&
          retrievedNotifications.response.notifications
      )); // <---- Setting up state directly from previous value,instead of getting it from clone version of use callback
      } catch (err) {
        console.log(err);
        setError(err.message);
      }
      setIsLoading(false);
    },[setIsLoading,setNotifications,setError]
  );

工作演示：

检查控制台日志以获取更新的页面值，并且通知将自动在HTML上呈现

Edit nostalgic-sound-r07x2

注意：删除了一些代码只是为了提高代码的可读性和 调试问题

,

问题真的很简单。 getNotifications函数是使用useCallback创建的，尚未使用notifications作为依赖项。现在，通知更新时，由于关闭，getNotications函数仍在引用旧的通知值。

还请注意，设置页面状态后立即在fetchMoreNotifications上调用getNotifications，但是页面状态也受闭包的约束，并且不会在相同的重新渲染中更新

这里的解决方案是使用函数方法来设置setNotifications，并使用useEffect来在页面更改时触发trigge4r getNotification 

const fetchMoreNotifications = useCallback(async () => {
    const newPage = page + 7;
    setPage(newPage);
  },[dispatch,getNotifications]);

  useEffect(() => {
    setIsLoading(true);
    getNotifications(page).then(() => {
      setIsLoading(false);
    });
  },page,getNotifications]);

const getNotifications = useCallback(async () => {
    setError(null);
    setIsLoading(true);
    try {
      console.log("Get from page " + page);
      // let fromRecord = (page - 1) * 7;
      const retrievedNotifications = await getNotificationList(
        page,false
      );

      setNotifications(prevNotification => prevNotification.concat(
        retrievedNotifications &&
          retrievedNotifications.response &&
          retrievedNotifications.response.notifications
      ));
    } catch (err) {
      setError(err.message);
    }
    setIsLoading(false);
  },setIsLoading,setError]);
react-hooksreact-nativereactjsusecallback
本文链接：https://www.f2er.com/2217906.html

大家都在问