返回上一页时更新状态

Posted 2023-03-10

【中文标题】返回上一页时更新状态

【英文标题】：Update state when returning to previous page

【发布时间】：2021-09-20 11:55:11

【问题描述】：

我从“个人资料”页面上显示的查询调用中获得了描述。当用户想要编辑此描述时，他们会转到另一个名为“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>
  );

【参考方案1】：

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

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

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

route.params.cb(newDes)

【讨论】：

非常感谢！