退出时重置输入值

Question

我在我的应用程序中使用本机基本输入字段，如下所示：const [startingPoint, setStartingPoint] = useState('');const [endingPoint, setEndingPoint] = useState('');<Input  placeholder="My Input Value"  onChangeText={text => setEndingPoint(text)}  value={endingPoint}/>这些值包含在 View 和 Modals 中。不是任何形式。输入功能本身可以正常工作。但是，当我退出页面（如在我的应用程序中单击返回或取消）并返回时，我之前在字段中写入的值仍然存在。每次退出页面时有什么方法可以重置它们吗？这就是我的模态的样子：export const JourneyDetailsPage: React.FunctionComponent<JourneyDetailsPageProps> = ({  toggleShowPage,  showJourneyDetailsPage,}) => {  const [startingPoint, setStartingPoint] = useState('');  const [endingPoint, setEndingPoint] = useState('');  const [showAvailableTripsPage, setShowAvailableTripsPage] = useState(false);  const toggleAvailableTripsPage = () => {    setShowAvailableTripsPage(showAvailableTripsPage ? false : true);  };  return (    <Modal      visible={showJourneyDetailsPage}      animationType="slide"      transparent={true}>      <SafeAreaView>        <View style={scaledJourneyDetailsStyles.container}>          <View style={scaledJourneyDetailsStyles.searchTopContainer}>            <View style={scaledJourneyDetailsStyles.searchTopTextContainer}>              <Text                onPress={toggleShowPage}>                Cancel              </Text>              <Text>                Location              </Text>              <Text>                Done              </Text>            </View>            <View>              <Item rounded style={scaledJourneyDetailsStyles.searchField}>                <Icon                  name="map-marker"                  color="green"                />                <Input                  placeholder="Start"                  onChangeText={text => setStartingPoint(text)}                  value={startingPoint}

Answer 1

Modal 隐藏后仍然挂载，因此数据仍然会在状态中浮动。

您可以做的是使用 Effect 以useEffect在 Modal 隐藏时重置状态，“观察”showJourneyDetailsPage状态，例如：

useEffect(() => {

  if (showJourneyDetailsPage) return; // If shown, do nothing

  setStartingPoint('');

  setEndingPoint('');

  // ...

}, [showJourneyDetailsPage]);