Javascript Can'；t将状态传递给另一个组件[反应本机]

我正在尝试向api发送请求，并将从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,
    };
  }

---

所以问题是如何将状态发送到另一个组件？尝试了两个教程，但不适合我。我应该使用道具而不是状态，因为它们是公共的吗？请随时就总体逻辑和代码提供建议

您不能将状态从一个组件发送到另一个组件，但如果您通过道具将状态传递给两个组件，它们可以共享一个状态实例。如果您愿意，您可以进入Redux-State management library，它为所有组件提供单一的状态源，或者快速解决方案是，如果您的组件共享同一个父级，那么您可以在那里提升您的状态

组件A是父组件，其状态为

this.state = {
  uuid: null
}

您可以创建一个方法，为您设置此uuid属性，即

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

您必须通过props将它传递给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)} }/>

{this.props.navigation.navigate（'SecondPage'，{uuid:this.props.uuid}），this.getCode（this.state.text，this.state.password）}/>

---

另外请注意，在onPress prop中，您引用了uuid之类的uid，在上面的代码片段中，我为您修复了这一点。

为什么在提取尚未完成的情况下导航到另一个屏幕？您应该等待响应完成，设置状态并导航到下一个屏幕，或者将所需的数据（电话和密码）作为道具传递到下一个屏幕，让它自己调用API

---

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

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

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

然后，我会将按钮的

on按钮中的代码更改为

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

{
this.getCode（this.state.text、this.state.password）；
}}/>

然后，您应该能够使用
this.props.navigation.state.params.uid来访问下一屏幕中的值

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