сбой асинхронной функции в методе render () (нарушение инварианта) - PullRequest
Новая
       54

сбой асинхронной функции в методе render () (нарушение инварианта)

0 голосов
/ 26 октября 2019

Я пытаюсь использовать асинхронную функцию в render (): 

 async _check() {
 const token = await AsyncStorage.getItem('myToken');
 if(token !== null) {
   this.props.navigation.navigate('My Screen', {token: token});
 }   
 else {
   return (
     <View style={styles.content_container}>
      ... 
     </View>
   );  
 }   
}


render() {
 return (
   <View>
     { this._check() }
   </View>
 );
}

но я получаю эту ошибку:
Invariant Violation: Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.

Может кто-нибудь сказать мнечто не так с моим кодом?

1 Ответ

0 голосов
/ 26 октября 2019

Вы не можете использовать какие-либо асинхронные функции или делать какие-либо побочные эффекты (например, навигацию) при рендеринге. Это прямо противоречит принципам React. Рендеринг должен быть только рендерингом элементов из реквизита и состояния. Кроме того, ошибка, которую вы получаете, заключается в том, что вы отображаете результат асинхронной функции, которая всегда является Promise . Кроме того, получение токена из AsyncStorage для каждого рендера не имеет смысла, так как рендеринг будет происходить часто, вплоть до нескольких раз в секунду

Поместите свою логику в методы жизненного цикла например componentDidMount, затемиспользуйте this.setState для изменения состояния так, как вы хотите, и используйте this.state для визуализации вашего компонента в render()

class SomeComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: ''
    }
  }

  async componentDidMount() {
    const token = await AsyncStorage.getItem('myToken')
    if (token !== null) {
      this.props.navigation.navigate('My Screen', { token: token })
    } else {
      this.setState({ message: 'token is missing' })
    }
  }

  render() {
    return (
      <View style={styles.content_container}>
        <Text>{this.state.message}</Text>
      </View>
    )
  }
}
...