返回上一页时更新状态

Question

我正在从“个人资料”页面上显示的查询调用中获取描述。当用户想要编辑此描述时，他们会转到另一个名为“editProfile”的页面。当他们完成编辑后，他们可以按提交，这将更改服务器上的描述。我的问题是，当我 return 到“个人资料”页面时，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>
  );
}

Answer 1

导航到 EditProfile 时，您传递一个回调函数，如下所示：

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

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

route.params.cb(newDes)

返回上一页时更新状态

Update state when returning to previous page

apollo

reactjs

graphql

react-native