Невозможно успешно передать параметры в другой файл / экран .js

Question

Я пытаюсь передать параметры с одного экрана на другой, используя реагирующую навигацию, проблема, с которой я сталкиваюсь, заключается в том, что когда я console.log сам параметр, консоль возвращает «undefined».Кажется, я не могу точно определить, что я делаю неправильно.Любая помощь или руководство будет высоко ценится.

Я попробовал следующее, но безуспешно:

-this.props.navigation.getParam ('biometryStatus') -this.props.navigation.state.params ('biometryStatus')

Это мой экран AuthenticationEnroll, где мой параметр инициализируется как состояние компонента:

  export default class AuthenticationEnroll extends Component {
    constructor() {
        super()

        this.state = {
          biometryType: null
        };
    }

    async _clickHandler() {
        if (TouchID.isSupported()){
            console.log('TouchID is supported');
            return TouchID.authenticate()
            .then(success => {
                AlertIOS.alert('Authenticated Successfuly');
                this.setState({biometryType: true })
                this.props.navigation.navigate('OnboardingLast', {
                  pin: this.props.pin,
                  biometryStatus: this.state.biometryType,
                });
            })
            .catch(error => {
                console.log(error)
                AlertIOS.alert(error.message);
            });
        } else {
            this.setState({biometryType: false });
            console.log('TouchID is not supported');
            // AlertIOS.alert('TouchID is not supported in this device');
        }
    }

    _navigateOnboardingLast() {
      this.props.navigation.navigate('OnboardingLast', {pin: this.props.pin})
    }

    render () {
      return (
        <View style={{flex: 1}}>
          <Slide
            icon='fingerprint'
            headline='Secure authentication'
            subhead='To make sure you are the one using this app we use authentication using your fingerprints.'
            buttonIcon='arrow-right'
            buttonText='ENROLL'
            buttonAction={() => this._clickHandler()}
            linkText={'Skip for now.'}
            linkAction={() => this._navigateOnboardingLast()}
            slideMaxCount={4}
            slideCount={2}
            subWidth={{width: 220}}
          />
        </View>
      )
    }
} 

А это мой экран OnboardingLast, где мой параметр передается и печатается через консоль.log:

class OnboardingLast extends Component {

  async _createTokenAndGo () {
    let apiClient = await this._createToken(this.props.pin)
    this.props.setClient(apiClient)
    AsyncStorage.setItem('openInApp', 'true')
    const { navigation } = this.props; 
    const biometryStatus = navigation.getParam('biometryStatus', this.props.biometryStatus);
    console.log(biometryStatus); 
    resetRouteTo(this.props.navigation, 'Home')
  }

  /**
  * Gets a new token from the server and saves it locally
  */
  async _createToken (pin) {
    const tempApi = new ApiClient()
    let token = await tempApi.createToken(pin)
    console.log('saving token: ' + token)
    AsyncStorage.setItem('apiToken', token)
    return new ApiClient(token, this.props.navigation)
  }

  render () {
    return (
      <View style={{flex: 1}}>
        <Slide
          icon='checkbox-marked-circle-outline'
          headline={'You\'re all set up!'}
          subhead='Feel free to start using MyUros.'
          buttonIcon='arrow-right'
          buttonText='BEGIN'
          buttonAction={() => this._createTokenAndGo()}
          slideMaxCount={4}
          slideCount={3}
        />
      </View>
    )
  }
} 

Ожидаемый результат: console.log (biometryStatus);возвращает true или false, однако возвращает undefined.

Answer 1

Поскольку setState является асинхронным, вы отправляете null (объявлено в вашем конструкторе) на следующую страницу.При этом вы отправите true:

this.setState({ biometryType: true })
this.props.navigation.navigate('OnboardingLast', {
    pin: this.props.pin,
    biometryStatus: true,
});

Вы также можете сделать это, поскольку setState может принять обратный вызов в качестве параметра :

this.setState({ biometryType: true }, () => {
  this.props.navigation.navigate('OnboardingLast', {
    pin: this.props.pin,
    biometryStatus: true,
  });
})

В вашемвторая страница this.props.biometryStatus - это undefined.Второй аргумент getParam является значением по умолчанию.Вы должны изменить это так

const biometryStatus = navigation.getParam('biometryStatus', false);