如何在 React Native 中跨屏幕传递 API (Axios) 响应数据？

Question

I stuck and do not know how to pass API Response data across screens.

In screen #1 i do API call and get response data Now i need to use api-secret "key" from response data to Log out Screen.

I was reading about Redux, but got confused and could not fully get it.

Looking for some alternatives how i can pass data.

My Code is

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        login: "",
        password: ""
      },
      activity: false
    };
  }

  _login = async () => {
    if (this.state.user.login !== "" && this.state.user.password !== "") {
      console.log(this.state);
      this.setState({ activity: true });
      await Axios.post(LoginAPI, this.state, { headers: { appversion: 1.4 } })
        .then(response => {
          console.log(response);
          const status = response.status;
          if (status === 200) {
            this.setState({ activity: false });
            this.setState({ response });
            this.props.navigation.navigate("CreateMove");
            console.log(this.state);
          }
        })

        .catch(error => {
          console.log({ error });
          this.setState({ activity: false });
          Alert.alert("Error", error.response.data.error);
        });

      //Alert.alert("Easymove", "Login ");
      //this.props.navigation.navigate("CreateMove");
    } else {
      Alert.alert("Support", "Email & Password field can not be empty");
    }
  };
}

And need To pass Response in State across screens

Answer 1

Youre already using react navigation so you can just pass the response as a param with the routename, or use setParam and getParam https://reactnavigation.org/docs/en/params.html

this.props.navigation.navigate("CreateMove", { response: response});

in your other screen you would get the response with

const response = this.props.navigation.getParam('response')

Answer 2

Since you don't want to use redux for your application use AsyncStorage in React Native.

First, install npm i @react-native-community/async-storage . Then change your _login function as below. Don't use both Promise & Async/Await and use only one approach .

import AsyncStorage from '@react-native-community/async-storage';


_login = async () => {
  if (this.state.user.login !== "" && this.state.user.password !== "") {
    this.setState({ activity: true });
    try {
      let response = await Axios.post(LoginAPI, this.state, {
        headers: { appversion: 1.4 }
      });
      if (response.status == 200) {
        this.setState({
          activity: false,
          response
        });
        await AsyncStorage.setItem('@Secret-Key', response);
        this.props.navigation.navigate("CreateMove");
      }
    } catch (error) {
      this.setState({ activity: false });
      Alert.alert("Error", error.response.data.error);
    }
  } else {
    Alert.alert("Support", "Email & Password field can not be empty");
  }
};

Then get @Secret-Key value from LogOut Screen.

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem("@Secret-Key");
    if (value !== null) {
      // You can access your data
    }
  } catch (error) {
    console.log(error);
  }
};

Hope this will helps you. Feel free for doubts.