返回上一页时更新状态

如何解决返回上一页时更新状态

我从“个人资料”页面上显示的查询调用中获取描述。当用户想要编辑此描述时，他们会转到另一个名为“editProfile”的页面。完成编辑后，他们可以按提交，这将更改服务器上的描述。我的问题是，当我返回“个人资料”页面时，UI 中的描述没有更新。我该如何最好地解决这个问题？使用钩子或某种状态管理（如 redux）？提前致谢

function Profile({ navigation }: ProfilestackNavProps<"Profile">) {
  const { loading,error,data } = useQuery(GET_DESCRIPTIONS_FROM_ID);
  const [description,setDescription] = useState(data.profiles[0].description);

  return (
     <Text>{description}</Text>
     //bunch of other code
     <Button
          onPress={() => {
            navigation.navigate("EditProfile",{ description });
          }}
        >

  )
}

function EditProfile({ route }: ProfilestackNavProps<"EditProfile">) {
  const [text,setText] = useState(route.params.description);
  const [editDescription,{ loading,error }] = useMutation(EDIT_DESCRIPTION);
  return (
    <Center>
      <TextInput onChangeText={setText} value={text} editable={true} />
      <MyButton
        title={"Save"}
        onPress={() => {
          editDescription({
            variables: { description: text },});
        }}
      />
    </Center>
  );
}

解决方法

当导航到 EditProfile 时，你传递一个这样的回调函数：

<Button
          onPress={() => {
            navigation.navigate("EditProfile",{ description,cb:(newDes)=>{setDescription(newDes)} });
          }}
        >

然后，当你完成编辑时，调用你传递的函数：

route.params.cb(newDes)