时间戳

首页 > 解决方案 > 渲染后如何根据状态切换子组件？

javascript - 渲染后如何根据状态切换子组件？

问题描述

Index.tsx、Profile.tsx、Login.tsx 共有三个屏幕。我尝试登录以设置 AsyncStorage，然后返回到 Profile，使用从 AsyncStorage 获取的 this.state.member 来切换 Profile 内的组件。但是现在我只能返回索引然后配置文件，这样我可以更改配置文件中的子组件

我之前通过使用 react-navigation createSwitchNavigator() 完成了这样的操作。但是现在我尝试使用 this.setState({member: (result from AsyncStorage.getItem("member") ) ? AsyncStorage.getItem("member") : undefined }) in componentDidMount() 在 Profile 中重新渲染

这是案例的代码，https://gist.github.com/sanhuang/4526dbd00051695c80b7b36dd7230ef8

export default class ProfileSreen extends Component {

  constructor(props) {
    super(props)

    this.state = {
      isLoading: true,
      isSignIn: false,
      member: undefined
    }

    this._getMemberStorage = this._getMemberStorage.bind(this);
  }

  componentDidMount() {
     this._getMemberStorage();
  }

  async _getMemberStorage(): Promise<void> {
    try{
      // let member = null;
      let member = await ExStorage.getItem("member");
      // console.log(member);

      if ( member !== null ){
        await this.setState({
          member,
          isSignIn: true
        });
      }else{
        await this.promisedSetState({
          member: null,
          isSignIn: false
        });
      }
      await this.promisedSetState({
        isLoading: false
      });

      return true;
    }catch(e) {
      console.error(e);
    }
  }

  promisedSetState = (newState) => {
    return new Promise((resolve) => {
      this.setState(newState, () => {
        resolve()
      });
    });
  }

  protected _renderLogin() {
    return (
      <ListItem>
          <Button small rounded
            onPress={() => {
              this.props.navigation.navigate('Profile_Login');
            }}
          >
            <Text>Login</Text>
          </Button>
      </ListItem>
    )
  }

  protected _renderMember() {
    return (
      <ListItem>
        <Body>
          <H2>{this.state.member.cmt} {this.state.member.unit}{this.state.member.name},您好</H2>
          <Text note>xxx</Text>
        </Body>
      </ListItem>
    )
  }


  protected render() {
    let infocoms = null;

    if (this.state.isLoading ) {
      return (
        <L.PageLoading />
      )
    }else{
      if (this.state.isSignIn) {
        infocoms = this._renderMember();
      } else {
        infocoms = this._renderLogin();
      }

      return (
        <Root>
          <Container>
          <Content>
            <List>
              {infocoms}
            </List>

            <Settings />

          </Content>
          {<L.IFooter />}
          </Container>
        </Root>
      );
    }

  }
}

即使我登录，结果也总是呈现 _renderLogin()

标签： javascriptreactjsreact-native

解决方案

您是否确实看到您member从登录请求中获得了有效值？

此外，您不需要在 a 之前放置 await setState：

await this.setState({
          member,
          isSignIn: true
        });

我猜这可能会导致意想不到的事情。

推荐阅读