React Native 导航后重置状态值,父组件的goBack()不起作用

14ifxucb 于 2022-11-30 发布在 React

关注(0)|答案(1)|浏览(125)

在我的React Native 0.70应用中，有2个组件Home（父项）和ListSearch（子），用户在Home中输入服务器字符串，搜索结果显示在ListSearch中，当用户点击ListSearch上的navigation.goBack()返回到Home时，react navigation 6.x中的useFocusEffect用于重置Home中搜索栏上的占位符。以下是Home（父级）中用于重置占位符的代码：

export default Home = ({ navigation}) => {

const searchHolder = "Enter search string here";
const [plcholder, setPlcholder] = useState(searchHolder);

 const submitsearch = async () => {
   ...
   setPlcholder(searchHolder);//reset place holder
   navigation.navigate("ListSearch", {artworks:res, title:"Search Result"}). //<<==ListSearch is component of result displaying 
 }

//reset placeholder whenever the Home is focused.
    useFocusEffect(
        React.useCallback(() => {
            setPlcholder(searchHolder);  // reset the place holder search bar
        },[navigation])
    );

 //view
 return (
         ...
            <View style={{flex:5}}>
                <TextInput  style={{fontSize:hp("3%")}} placeholder={plcholder} onChangeText={strChg}></TextInput>.  //plcholder here
            </View>
 )

}

上面的代码不起作用。当用户navigation.goBack()到Home组件时，搜索栏中的占位符是以前的搜索字符串，没有更新。

react-native

来源：https://stackoverflow.com/questions/74620009/reset-state-value-after-navigation-goback-to-parent-component-didnt-work

1条答案

按热度按时间

ehxuflar1#

当您导航到ListSearch时，占位符字符串会更新，您应该将TextInput的value设置为空字符串，以下是您可以参考的代码，

import { useState,useEffect } from 'react';
import { View, TextInput, TouchableOpacity, Text } from 'react-native';

export default Home = ({ navigation }) => {
  const searchHolder = 'Enter search string here';
  const [plcholder, setPlcholder] = useState(searchHolder);
  const [text, setText] = useState();

  const submitsearch = () => {
    console.log('submitsearch called ', searchHolder);
    setText("");
    setPlcholder(searchHolder);
    navigation.navigate('ListSearch');
  };

  //view
  return (
    <View style={{ flex: 5 }}>
      <TouchableOpacity onPress={() => submitsearch()}>
        <Text>Submit</Text>
      </TouchableOpacity>
      <TextInput
        style={{ fontSize: 20, marginTop: 30 }}
        placeholder={plcholder}
        value={text}        
        onChangeText={(val) => setText(val)} />
    </View>
  );
};

Here是我创建的演示。

赞(0）回复(0）举报 2022-11-30

我来回答

React Native 导航后重置状态值,父组件的goBack()不起作用

1条答案

相关问题

热门标签

最新问答