最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React Native Set State not working inside custom method (Functional Component) - Stack Overflow

programmeradmin7浏览0评论

I am facing a peculiar scenario which I am not able to understand. I have a registration screen (functional component) and additional info screen (functional Component) in stack navigator. In the registration screen I have a method which updates the value of Input Text Field on click of signup button. Method is provided below (Unwanted code removed for simplicity). When I click the signup button in the same screen (Registration screen), I see the method signup is getting called which updates the string to Check 1 and also reflects in the input field , no issues there... But When I navigate to the next screen (Additional Info Screen) by passing this method as one of the property in Navigation object and call the same method from that screen using the navigate props object, I see the same method is getting called but the state of the string is not changed to Check 1 . Below code block which i used to call the sign up method from the other screen .

  **
    // this line takes the user back to the registration screen
    navigation.dispatch(
            StackActions.push("RegisterScreen", {
              params: validateParam,
            })
          );
    // This line calls the signup Method in the registration screen
    route.params.params.myParam(validateParam);

**

One more thing I noticed in the logs is when the Signup method is called in that same screen (Registration Screen), below log line is not getting printed. console.log("Inside Register Screen"); But when it is called as a property from the other screen this line is showing in the console right after that method execution which I think is what causing the problem . Can someone please explain why its not working.

const RegisterScreen = ({ navigation, route, ...props }) => {
 
  console.log("Inside Register Screen");
  const [additionalInfo, setadditionalInfo] = useState(
    "   Additional Information"
  );
  
  function signup() {
    console.log(
      "Inside Signup method ********************************************"
    );
    setadditionalInfo("check 1");
    console.log(
      "all Done Signup methods ********************************************"
    );
    return;
  }

  
  useEffect(() => {
    if (prevRoute !== undefined && prevRoute.name === "additionalScreen") {
      console.log("Error Check");
      prevRoute.params.params.myParam();
    }
   
  });

  return (
    <ScrollView
      id="d1"
      contentContainerStyle={{ flexGrow: 1 }}
     
    >
   
                <View
                 
                >
                  <Input
                    // style={{ height: 10, maxHeight: 10 }}
                    containerStyle={{
                      maxHeight: 50,
                      marginTop: hp(2),
                      width: "85%",
                      marginBottom: hp(2),
                      //backgroundColor: "pink",
                      
                    }}
                    onFocus={() => {
                      navigation.navigate("additionalScreen", {
                        params: { myParam: signup },
                        prevState: navigation.state,
                      });
                    }}
                    inputStyle={{ fontSize: 15 }}
                    //placeholderTextColor="grey"
                    placeholder="  additional"
                    //placeholderTextColor="black"
                    value={additionalInfo}
                    showSoftInputOnFocus={false}
                    //disabled

                    errorStyle={{ color: "red" }}
                    errorMessage={additionalInfoErrorMessage}
                    leftIcon={
                      <FontIcon name="building-o" size={15} color="grey" />
                    }
                    keyboardType="email-address"
                  />
                   <TouchableOpacity
                      onPress={() => {
                        signup();
                      }}
                      style={styles.signUpButton}
                    >
                      <Text style={{ color: "black", fontSize: wp(4) }}>
                        Sign Up
                      </Text>
                    </TouchableOpacity>
                
        </View>
      </LinearGradient>
    </ScrollView>
  );
};

I am facing a peculiar scenario which I am not able to understand. I have a registration screen (functional component) and additional info screen (functional Component) in stack navigator. In the registration screen I have a method which updates the value of Input Text Field on click of signup button. Method is provided below (Unwanted code removed for simplicity). When I click the signup button in the same screen (Registration screen), I see the method signup is getting called which updates the string to Check 1 and also reflects in the input field , no issues there... But When I navigate to the next screen (Additional Info Screen) by passing this method as one of the property in Navigation object and call the same method from that screen using the navigate props object, I see the same method is getting called but the state of the string is not changed to Check 1 . Below code block which i used to call the sign up method from the other screen .

  **
    // this line takes the user back to the registration screen
    navigation.dispatch(
            StackActions.push("RegisterScreen", {
              params: validateParam,
            })
          );
    // This line calls the signup Method in the registration screen
    route.params.params.myParam(validateParam);

**

One more thing I noticed in the logs is when the Signup method is called in that same screen (Registration Screen), below log line is not getting printed. console.log("Inside Register Screen"); But when it is called as a property from the other screen this line is showing in the console right after that method execution which I think is what causing the problem . Can someone please explain why its not working.

const RegisterScreen = ({ navigation, route, ...props }) => {
 
  console.log("Inside Register Screen");
  const [additionalInfo, setadditionalInfo] = useState(
    "   Additional Information"
  );
  
  function signup() {
    console.log(
      "Inside Signup method ********************************************"
    );
    setadditionalInfo("check 1");
    console.log(
      "all Done Signup methods ********************************************"
    );
    return;
  }

  
  useEffect(() => {
    if (prevRoute !== undefined && prevRoute.name === "additionalScreen") {
      console.log("Error Check");
      prevRoute.params.params.myParam();
    }
   
  });

  return (
    <ScrollView
      id="d1"
      contentContainerStyle={{ flexGrow: 1 }}
     
    >
   
                <View
                 
                >
                  <Input
                    // style={{ height: 10, maxHeight: 10 }}
                    containerStyle={{
                      maxHeight: 50,
                      marginTop: hp(2),
                      width: "85%",
                      marginBottom: hp(2),
                      //backgroundColor: "pink",
                      
                    }}
                    onFocus={() => {
                      navigation.navigate("additionalScreen", {
                        params: { myParam: signup },
                        prevState: navigation.state,
                      });
                    }}
                    inputStyle={{ fontSize: 15 }}
                    //placeholderTextColor="grey"
                    placeholder="  additional"
                    //placeholderTextColor="black"
                    value={additionalInfo}
                    showSoftInputOnFocus={false}
                    //disabled

                    errorStyle={{ color: "red" }}
                    errorMessage={additionalInfoErrorMessage}
                    leftIcon={
                      <FontIcon name="building-o" size={15} color="grey" />
                    }
                    keyboardType="email-address"
                  />
                   <TouchableOpacity
                      onPress={() => {
                        signup();
                      }}
                      style={styles.signUpButton}
                    >
                      <Text style={{ color: "black", fontSize: wp(4) }}>
                        Sign Up
                      </Text>
                    </TouchableOpacity>
                
        </View>
      </LinearGradient>
    </ScrollView>
  );
};
Share Improve this question edited Jan 18 at 2:59 Drew Reese 204k18 gold badges240 silver badges271 bronze badges asked Jan 18 at 1:10 SaimugaSaimuga 4351 gold badge7 silver badges24 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

Use React Context

Create a Context wrap your app and use context from screens. But in your case This behavior occurs because the state of the string being updated in your RegistrationScreen is part of the state of that component, and when you navigate to a new screen, the RegistrationScreen is no longer active in the React tree. you have to have BLL which is Business logic layer so you can use it globally without sending as a props To ensure state updates are accessible across both screens, you can share the state and methods globally or in a higher-level component.

发布评论

评论列表(0)

  1. 暂无评论