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

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

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

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

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

Спасибо!


react-native reactjs javascript asynchronous asyncstorage
person gkeenley    schedule 21.02.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

В вашем 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() }
    )
}
person Sadman Muhib Samyo    schedule 21.02.2019
comment
Но это срабатывает только один раз, когда компонент загружен. Не всегда компонент отображается. - person kwoxer; 11.08.2020

arrow_upward
0
arrow_downward

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

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

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

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

person Vgoose    schedule 21.02.2019