为什么我从上一个 Stack.screen 返回时我的屏幕没有刷新？

Question

我使用 react-native 和 graphQL。

我有 Screen2: EditPhoto。

这里，我通过 graphQL 的 mutation 更改标题。

然后如果我按下按钮，它将返回到 Screen1，这是通过 navigate.goBack().

的照片

(Screen2 -> Screen1)

  const EditValid = () => {
    editPhotoMutation();
    navigation.goBack();
  };

    <SmallButton
      styleB={{ backgroundColor: `${colors.normal}` }}
      styleBT={{ color: `${colors.lightgray}`, fontSize: 20 }}
      text={"확인"}
      onPress={handleSubmit(EditValid)}
    />

当我返回屏幕 1 时，我希望应用更改后的标题。

但不是，而且我知道屏幕只是被渲染了once，这是不可能的。

所以我搜索了刷新Screen1的方法

根据这个建议，我尝试使用useEffect和navigation.addListener。

  const { data, loading, refetch, fetchMore } = useQuery(FEED_QUERY, {
    variables: {
      offset: 0,
    },
  });
  const [feedData, setFeedData] = useState(data?.seeFeed);

  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      refetch();
      setFeedData(data?.seeFeed);
    });
    return unsubscribe;
  }, [navigation]);

我要的很简单

我想再次 refetch() 提要查询并想 feedData 重新获取数据。

但它不起作用。当我回到 Screen1 时，数据保持不变。

请帮帮我~~:(

当我console.log数据时，似乎当我回到Screen1时，UI又被渲染了。

但是refetching way很奇怪..?

因为当我 console.log 数据时，如果我从 Screen1 返回，数据是控制台。log-ed 再一次。但只是数据是一样的。

Answer 1

这可以通过 useFocusEffect 从 '@react-navigation/native'

实现

useFocusEffect 会在每次屏幕聚焦时生效

参考：https://reactnavigation.org/docs/use-focus-effect/

import { useFocusEffect } from '@react-navigation/native';

function Profile({ }) {
 

  useFocusEffect(
    React.useCallback(() => {
      
// Below alert will fire every time when this screen is focused
   alert('Hi')
      
    }, [])
  );

  return // ...code
}

Answer 2

您可以为此使用 useIsFocused() 挂钩。

  const isFocused = useIsFocused();

  useEffect(() => {
    yourFunction();
  },[isFocused]);

编辑 ==> 适用于这种特定情况的另一种方法和解决方案：-

const [active, setActive] = useState(true);  
useFocusEffect(
    React.useCallback(() => {
      if(active){
        refresh();
        setActive(false)
      }
    },[data?.seeFeed?.length])
  );

还必须传递数据吗？请参阅 Feed 直接到 flatList 中的数据属性

为什么我从上一个 Stack.screen 返回时我的屏幕没有刷新？

Why my screen is not refreshed when I go back from previous Stack.screen?

graphql

react-native

react-hooks