如何控制异步方法反应

Question

我想将数据发送到另一个组件。我从

获得数据

asyncstorage.getItem（'mykey'）;

但是当启动异步时，组件开始渲染，因此将空数据发送到另一个组件。

这是我的方法;

  componentWillMount(){
          this.getdata(); 
        }
    getdata =  async () => {
  console.log("console1");
          const value = await AsyncStorage.getItem('myKey');
    console.log("console2");
          let valuePrsed = JSON.parse(value);
          if(valuePrsed.username != null && valuePrsed.password != null)
          {
                this.setState({values: valuePrsed});
          }
        }

这是我的渲染方法;

 render() {
      console.log("rende splashscreen: ", this.state.values);
      let { fadeAnim } = this.state;
        return (
          <View style = {{flex:1}}>
          <LoginForm  profile = {this.state.values}/>
            <Animated.View style={{ ...this.props.style, opacity: fadeAnim }} >
            {this.props.children}
              <ImageBackground style={styles.logo1} source={require('../../image/dataLogo.jpeg')} >
                </ImageBackground>
            </Animated.View>
          </View>
        );
    }

我将数据发送到登录名。我想问一个问题。如果我这样使用<LoginForm />，它会破坏我的组件。我如何以不同的方式发送？

Answer 1

仅在准备渲染时渲染。我这样做的方式是初始化一个状态，假设isReady并将其设置为false，然后将其设置为true。
看起来像这样：

    export default class test extends Component {
constructor(props) {
    super(props)
    this.state = {
       isReady:false
    }
}
     componentWillMount(){
          this.getdata(); 
        }
    getdata =  async () => {
         const value = await AsyncStorage.getItem('myKey');
         this.setState({isReady:true})
          let valuePrsed = JSON.parse(value);
          if(valuePrsed.username != null && valuePrsed.password != null)
          {
                this.setState({values: valuePrsed});
          }
        }
    render() {
        if(this.state.isReady){
        return (
            <View ref={ref => this.view = ref} onLayout={() => this.saveLayout()}>
            </View>
        )}else{
            <View></View>
        }
    }
}

到您的第二个问题：
如果您通过登录图，则可以在其中创建一个函数，以获取参数和更新状态，然后将该函数传递给其他组件，然后用对众对表中的值调用该函数。如果您使用的是React导航，则可以这样做：
登录名

updateValues(values){
   this.setState({value:values})
}

通过React-Navigation传递该功能：

this.props.navigation.navigate('otherComponent',{updateValues:this.updateValues})

在您的其他组件中，您将函数称为这样：
其他Component

this.props.navigation.state.params.updateValues(newValues);

Answer 2

如何检查渲染方法中的值变量？

Render（）{

  console.log("rende splashscreen: ", this.state.values);
  let { fadeAnim } = this.state;
    return (
      this.state.values ?
        <View style = {{flex:1}}>
        <LoginForm  profile = {this.state.values}/>
        <Animated.View style={{ ...this.props.style, opacity: fadeAnim }} >
        {this.props.children}
          <ImageBackground style={styles.logo1} source={require('../../image/dataLogo.jpeg')} >
            </ImageBackground>
        </Animated.View>
      </View>
      : <></>
    );
}

Answer 3

您可以将默认/初始值保留在状态变量中：

：

constructor(props){
  this.state = {
     values:{userName: '', password: ''}
}
}

，当可用的实际值可用时，您可以将其设置为状态，并自动重新呈现。由于Asyncstorage返回承诺，您可以使用.when（）语法

componentDidMount(){
  console.log("console1");
         AsyncStorage.getItem('myKey').then(value=>{
      let valuePrsed = JSON.parse(value);
      if(valuePrsed.username != null && valuePrsed.password != null)
          {
                this.setState({values: valuePrsed});
          }
}).catch(err=>{
  console.log('err', err);
})              
}