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。我想再问一个问题。如果我这样使用<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>
        }
    }
}

第二个问题：
如果通过LoginForm，则可以在其中创建一个获取参数并更新状态的函数，然后将该函数传递给其他组件，并使用参数表中的值调用该函数。如果您使用的是反应导航，则可以这样操作：
loginForm

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

要通过react-navigation传递功能，

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

在您的otherComponent中，您可以像下面这样调用函数：
otherComponent

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

Answer 2

如何在render方法中检查values变量？

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返回一个Promise，因此您可以使用.then（）语法

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);
})              
}

如何控制异步方法反应本机

3 个答案: