无法将状态传递给另一个组件[react-native] [英] Can't pass state to another component [react-native]

问题描述

我试图将请求发送到api，并将从那里获取的参数之一保存在我的状态内，然后将其发送到另一个要使用的组件.

I am trying to send request to api, and save one of the parameters I get from there inside my state, and then send it to another component to be used.

getCode函数发送请求，类方法

getCode function to send request, class 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 which runs getcode function and navigates to another screen/component where I want to send my state

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

这是我的发送方组件的构造函数和状态

Here is my constructor and state of sender component

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

这里是第二个组件的构造函数和状态

Here is constructor and state of second component

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

所以问题是如何将状态发送到另一个组件?尝试了几个教程，但对我不起作用.而且由于道具是公共的，我应该使用道具而不是状态吗?请随时就整体逻辑和代码提出建议

So the question is how do I send state to another component? tried couple tutorial but not working for me. And should I use props instead of state, since they are public? Please feel free to give advices on logic and code overall

推荐答案

查看按钮中的代码，导航到下一个屏幕后调用函数以获取代码似乎很奇怪.

Looking at the code in your button, it seems strange that you are calling the function to get the code after you have navigated to the next screen.

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

在导航后调用获取代码的函数意味着您的uid值将不会更新.

Calling the function that gets your code after you navigate means that your uid value will not have updated.

如果您想获取代码，然后将代码传递到下一个屏幕，我想您应该执行以下操作:

If you want to get the code then pass the code to the next screen I would imagine that you should be doing something like this:

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中的代码更改为

I would then change the code in the onPress of your button to

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

然后，您应该可以使用this.props.navigation.state.params.uid

Then you should be able to access the value in the next screen by using this.props.navigation.state.params.uid

这篇关于无法将状态传递给另一个组件[react-native]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！