Fatal编程技术网
  • javascript/
  • Javascript React本机子组件未从父组件接收更新的状态

Javascript React本机子组件未从父组件接收更新的状态

javascript reactjs react-native

Javascript React本机子组件未从父组件接收更新的状态,javascript,reactjs,react-native,state,Javascript,Reactjs,React Native,State,我正在尝试实现一个应用程序登录屏幕，用户在其中输入用户名和密码，应用程序将检索一个Json web令牌，该令牌将存储在应用程序状态中，用于管理他们在服务器上的帐户。现在，我的App.js如下所示 const RootStack = StackNavigator( { LoginPage:{screen:LoginPage}, HomePage:{screen:HomePage}, }, {headerMode:'none'}, ); export default class App e

我正在尝试实现一个应用程序登录屏幕，用户在其中输入用户名和密码，应用程序将检索一个Json web令牌，该令牌将存储在应用程序状态中，用于管理他们在服务器上的帐户。现在，我的App.js如下所示

const RootStack = StackNavigator(
{
  LoginPage:{screen:LoginPage},
  HomePage:{screen:HomePage},
},
{headerMode:'none'},
);

export default class App extends Component{
constructor(props) {
    super(props);
    this.state = {token:'not available yet'}
}


updateState = async(u,p) => {
    try {
        let token = await this.getToken(u,p);
        let merchantInfo = await this.getMerchantInfo(token);

        this.state = {token: token, merchantInfo}
        console.log(this.state)
        console.log('our token state is '+ this.state.token)
        console.log("our merchantinfo state is "+this.state.merchantInfo.name)
    }
    catch (error) {console.log(error);}
}



// update the state of merchant using authToken
getMerchantInfo = async(authToken) => {
    var options = {
      "method": "GET",
      "headers": {
        "authorization": "Bearer " + authToken,
        "content-type": "application/json"
        }
    }

    try {
        let response = await fetch('http://example.com/merchants/',options);
        let responseJson = await response.json();
        return responseJson;
    } catch (error) {console.error(error);}
}

// send over the username and password to server to retrieve an authToken
getToken = async(u,p) => {
    console.log('username is: '+u+' password is: '+p)
    var options = {
        "method": "POST",
        "headers": {
            "content-type": "application/json"
        },
        "body": JSON.stringify({
            "email": u,
            "password": p,
        }),
    };

    try {
        let response = await fetch('http://example.com/merchants/login',options);
        let responseJson = await response.json();
        return responseJson.token;
    } catch (error) {console.error(error);}
}


render() {
    return (<RootStack screenProps= {this.state} />)
}
}

export default class HomePage extends Component {
constructor(props) {
super(props);
this.state = {isReady: false};
console.log ('HomePage gets this token state: ' + this.props.screenProps.token)
}


render() {
return (
  <Container>
    <Header hasTabs>
      <Left />
      <Body>
        <Title>my app</Title>
      </Body>
      <Right>
        <Button transparent onPress={() => this.props.navigation.navigate('LoginPage')}>
          <Text>Logout</Text>
        </Button>
      </Right>
    </Header>

    <Tabs>
      <Tab heading="Issue">
        <IssueTab />
      </Tab>
      <Tab heading="Redeem">
        <RedeemTab />
      </Tab>
      <Tab heading="Settings">
        <SettingsTab />
      </Tab>
    </Tabs>
  </Container>
);
}
}
但是，当我在HomePage.js中运行console.log（this.props.screenProps.token）时，我会得到初始状态：

HomePage gets this token state: not available yet
我在这里尝试了componentWillReceiveProps和其他一些搜索方法，但在我的情况下没有任何效果。在我的情况下，如何从HomePage.js获取App.js的更新状态

这是我在StackOverflow上的第一篇文章。干杯并提前表示感谢

只能在构造函数内部直接设置状态，如
this.State={some:'State'}
。在构造函数之外，您必须通过setter
this.setState
<代码>设置状态触发重新渲染器，新状态将按预期传递。见国家文件

我试着按照你的建议使用setState，现在App.js和HomePage.js都没有在console.log中得到“state is not available”…需要调用
updateState
，它在任何地方都没有被调用。Fetch通常发生在生命周期方法
componentDidMount
中。因此
componentDidMount=async（）=>{await updateState（this.props.u，this.props.p）}
就可以做到这一点。假设u和p是用户名和密码，您需要将它们作为道具传递到此组件。我尝试在HomeScreen.js中添加componentDidMount=async（）=>{await updateState（this.props.screenProps.token）}，它仍然告诉我初始的“状态尚未可用”
setState
是异步的，因此，
this.setState
之后的
console.log
语句将打印当前状态，而不是正在设置的下一个状态。如果将console.log（this.state）放在render中，它的输出是什么？对于初始渲染，应为
{token:'notavailable'}
，然后一旦组件装载并
updateState
（以及updateState中的this.setState）解析
此。状态
应等于
{token:token，merchantInfo}
。 
HomePage gets this token state: not available yet

...
 updateState = async(u,p) => {
        try {
            let token = await this.getToken(u,p);
            let merchantInfo = await this.getMerchantInfo(token);

            this.setState({token: token, merchantInfo})
        }
        catch (error) {console.log(error);}
    }
...