Не могу передать состояние другому компоненту

Question

Я пытаюсь отправить запрос в API и сохранить один из параметров, которые я получаю оттуда, в моем состоянии, а затем отправить его в другой используемый компонент.

Функция getCode для отправки запроса, классmethod

getCode(text, psw) {
fetch('someurl', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
    body: JSON.stringify({"telephone": text, "password": psw})
  })
  .then(response => response.json())
  .then(response => {
    //console.log(this.state.text) console.log(this.state.uid)

    this.setState({uid: response["data"]["id"]
    })
    console.log(this.state.uid)
    // this.setState({uid: response["data"]["telephone"]})
    // console.log(this.state.uid);
  })
  }

Кнопка, которая запускает функцию getcode и переходит на другой экран / компонент, куда я хочу отправить свое состояние

<Button
      title="do it"
      onPress=
      {() => {this.props.navigation.navigate('SecondPage', {uid: this.state.uid}), this.getCode(this.state.text, this.state.password)} }/>
  </View>

Вот мой конструктор и состояние компонента-отправителя

constructor(props) {
super(props);
this.state = {
  text: '',
  password: '',
  password2: '',
  uid: ''
}
}

Вот конструктор и состояние второго компонента

constructor(props) {
    super(props);
    this.state = {
      value: "",
      focused: false,
      text: "",
      u_id: this.props.navigation.state.params.uid,
    };
  }

Итак, вопрос в том, как отправить состояние другому компоненту?попробовал пару учебник, но не работает для меня.И стоит ли мне использовать реквизиты вместо государственных, поскольку они общедоступны?Пожалуйста, не стесняйтесь давать советы по логике и коду в целом

Answer 1

Почему вы переходите на другой экран, пока выборка еще не завершена?Вам следует либо дождаться завершения ответа, установить состояние и после того, как состояние было установлено , перейти к следующему экрану, либо просто передать необходимые данные (телефон и пароль) на следующий экран в качестве реквизита и позволить емувызвать сам API.

Также у вас есть ошибка, this.props.text должен быть this.state.text

Answer 2

Глядя на код в вашей кнопке, кажется странным, что вы вызываете функцию для получения кода после перехода на следующий экран.

<Button
  title="do it"
  onPress=
    {() => {
      this.props.navigation.navigate('SecondPage', { uid: this.state.uid });
      this.getCode(this.state.text, this.state.password);
    }}/>

Вызов функции, которая получает ваш код после навигации, означает, что ваше значение uid не будет обновлено.

Если вы хотите получить код, а затем передать код на следующий экран, я бы предположил, что вы должны делать что-то вроде этого:

getCode = (text, psw) => {
  fetch('someurl', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ 'telephone': text, 'password': psw })
  })
    .then(response => response.json())
    .then(response => {
      let uid = response['data']['id'];
      // this is the correct way to check a value after you have set it to state
      this.setState({ uid }, () => console.log(this.state.uid));

      // now that we have got the code we should navigate to the next screen
      // passing the uid as a parameter
      this.props.navigation.navigate('SecondPage', { uid });
    });
}

Я бы затем изменил код вonPress вашей кнопки для

<Button
  title="do it"
  onPress=
    {() => {
      this.getCode(this.state.text, this.state.password);
    }}/>

Тогда вы сможете получить доступ к значению на следующем экране, используя this.props.navigation.state.params.uid

Answer 3

Вы не можете отправлять состояния из одного компонента в другой, но они могут совместно использовать один экземпляр состояния, если вы передаете это состояние им обоим через реквизиты.Если вы хотите, вы можете погрузиться в Redux - библиотеку управления состояниями, которая предоставляет единый источник состояния для всех компонентов, или быстрое решение состоит в том, что если ваши компоненты имеют одного и того же родителя, чем вы можете поднять свое состояние там.

Компонент A является родительским, его состояние

this.state = {
  uuid: null
}

вы создаете метод, который устанавливает для вас эту uuid опору, т.е.

setUuid = (uuid) => {this.setState({ uuid })}

Вы должны передать его своемуизвлекать функцию через props и вызывать ее там, затем вызывать, как это

    getCode(text, psw) {
fetch('someurl', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
    body: JSON.stringify({"telephone": text, "password": psw})
  })
  .then(response => response.json())
  .then(response => {
    this.props.setUuid(response["data"]["id"])
  })
  }

Это обновит состояние родителя, и теперь вы можете передать эту uuid prop из parent в компонент, гдевы используете его в вашем случае, это

<Button
  title="do it"
  onPress=
  {() => {this.props.navigation.navigate('SecondPage', {uuid: this.props.uuid}), this.getCode(this.state.text, this.state.password)} }/>

Также, пожалуйста, обратите внимание, что в подпорке onPress вы ссылаетесь на uuid как uid, в приведенном выше фрагменте кода я исправил это для вас.