Как передать данные ответов API (Ax ios) по экранам в React Native?

Question

Я застрял и не знаю, как передавать данные ответа API по экранам.

На экране № 1 я выполняю вызов API и получаю данные ответа Теперь мне нужно использовать api-secret "ключ" из данных ответа Чтобы выйти из экрана.

Я читал о Redux, но запутался и не смог полностью его получить.

Ищите несколько альтернатив, как я могу передавать данные.

Мой код

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");
    }
  };
}

И нужно передать Ответ в состоянии через экраны

Answer 1

Поскольку вы не хотите использовать в своем приложении избыточность, используйте AsyncStorage в React Native.

Сначала установите npm i @react-native-community/async-storage. Затем измените вашу _login функцию, как показано ниже. Не используйте Promise и Async / Await и используйте только один подход .

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");
  }
};

Затем получите значение @Secret-Key из экрана выхода из системы.

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

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

Answer 2

Вы уже используете реагирующую навигацию, поэтому вы можете просто передать ответ как параметр с именем маршрутизатора или использовать setParam и getParam https://reactnavigation.org/docs/en/params.html

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

на другом экране, который вы получил бы ответ с

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