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-状态管理库，该库为所有组件提供单一的状态源，或者快速的解决方案是，如果您的组件共享同一个父对象，则可以在那里建立状态。

组件A为父对象，其状态为

this.state = {
  uuid: null
}

您创建一种方法来为您设置此 uuid 道具，即

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

您必须通过prop将其传递给fetch函数，然后在其中调用它，然后像这样进行回调

    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 道具从父级传递到您正在使用的组件

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

另外请注意，在onPress属性中，您像uid一样引用uuid，在上面的代码段中，我已为您修复了该问题。

Answer 3

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

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

无法将状态传递给另一个组件[react-native]

3 个答案: