Как вы отображаете компонент на основе значения AsyncStorage в React Native? - PullRequest
Новая
       13

Как вы отображаете компонент на основе значения AsyncStorage в React Native?

0 голосов
/ 21 февраля 2019

У меня есть компонент, который выглядит следующим образом: 

export default class Class1 extends Component {
  render = async () => {
    await AsyncStorage.getItem('someValue', (error, someValue) => {
      return(
        <Class2 prop1={someValue}/>
      )
    }
  }
}

Здесь происходит то, что мне нужно визуализировать Class1 на основе значения someValue, которое возвращается из AsyncStorage.Проблема в том, что вы не можете сделать метод render() асинхронным, потому что асинхронные функции возвращают обещание, а render() должен возвращать компонент React.

Кто-нибудь знает, как я могу это сделать?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Для такого рода задач вы бы указали значение в своем состоянии.И в зависимости от состояния вы будете отображать класс в соответствии с требованиями.

В вашем componentDidMount класса Class1 напишите: 

componentDidMount() {
    AsyncStorage.getItem('value').then((val) => {
        this.setState({ value: val });
    })
}

Затем в вашем Class1 добавьте метод, который будет генерировать класс на основена значение состояния: 

createClass() {
    // do something with the value
    if (this.state.value === somevalue) {
        return (
            <Class2 />
        )
    }
    return null;
}

И в вашем методе рендеринга Class1 введите: 

render() {
    return (
        { this.createClass() }
    )
}
0 голосов
/ 21 февраля 2019

Вы можете установить его в состояние, например: 

componentDidMount() {
  AsyncStorage.getItem('someValue', (e, someValue) => {
    this.setState({someValue})
  }
}

Затем вы можете использовать someValue из состояния в вашем рендере.

В настоящее время, в дополнение к проблеме асинхронного рендеринга, поскольку вы уже передаете обратный вызов AsyncStorage.getItem (), я не уверен, что будет делать использование async / await.

...