无法将状态传递给另一个组件 [反应本机]

Question

我正在尝试将请求发送到API，并保存我在状态内从那里获得的参数之一，然后将其发送到要使用的另一个组件。

getCode函数要发送请求，类方法

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

查看按钮中的代码，奇怪的是，您正在调用该功能以在您导航到下一个屏幕后获取代码。

<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 2

您不能将状态从一个组件发送到另一个组件，但是如果您通过道具将状态传递给两个状态，则可以共享一个状态。如果您愿意，可以潜入Redux -State Management库，该库为所有组件提供单个状态源，或者快速解决方案是，如果您的组件共享相同的父母，则与您可以在此处提升州。

组件a是父级的状态

this.state = {
  uuid: null
}

您创建了一个设置此 UUID Prop的方法。

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

您必须通过道具将其传递给您的获取功能，然后在此处称呼它，然后像这样的回调

    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从父母传递到您使用的组件，在您的情况下是

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

另外，请注意，在OnPress Prop中您像UID一样参考UID，在上面的代码段中，我为您修复了。

Answer 3

为什么您在获取尚未完成时导航到另一个屏幕？您应该等待响应完成，设置状态，然后将状态设置为"导航到下一个屏幕"，或者只需将所需的数据（电话和密码）传递到下一个屏幕作为道具，然后将其调用API本身。

也有一个错误，this.props.text应该是this.state.text