Блог

Главная - Вопросы по программированию - Как передать вывод promise в качестве prop с помощью mobx

Как передать вывод promise в качестве prop с помощью mobx

#javascript #react-native #mobx #mobx-react #state-management

#javascript #реагировать -родной #mobx #mobx-реагировать #управление состоянием

Вопрос:

В моем App.js файл У меня есть следующий код:

   import stores from 'client/stores';
  ...
  ...
  render() {
     return (
        <Provider {...stores}>
          <SafeAreaView>
            <AppContainer />
          </SafeAreaView>
       </Provider>
     );
  }

Я хочу извлечь свои данные из серверной части и ввести их AppContainer . Однако он должен быть получен асинхронно с использованием promise:

 // client/stores/index.js

boardsService.retrieveBoards().then(boards => {
    // I need to store boards here 
})

Затем вставьте платы в мой AppContainer 

 export default
@inject('boards')
@observer
class AppContainer extends React.Component {
  constructor(props) {
     super(props);
     console.log(props.boards); 
  }

  render() {
     ...
  }
}

Я пробовал это в stores/index.js:

 async function connect() {
  const connection = await boardsService.retrieveBoards();
  if (connection) {
    return connection;
  }
  return null;
}

connect().then(boards => {
  exports.boards = boards;
});

Но я получаю эту ошибку:

введите описание изображения здесь

Комментарии:

1. Извините, неправильно понял проблему — у меня ничего нет: p

2. Динамическое создание экспорта во время выполнения не работает. Вы можете создать хранилище данных , которое асинхронно устанавливает данные, которые вы сразу экспортируете.

3. Можете ли вы показать содержимое stores/index.js , что именно вы экспортируете? Ваш объект экспорта должен выглядеть примерно как { boards: { … } }. Я предполагаю, что вы экспортируете объект boards напрямую, и при его уничтожении в Provider вы получаете свойства boards в качестве доступных хранилищ для ввода, что неверно.

Ответ №1:

Во-первых, действия в Mobx не имеют возвращаемого значения. Они просто меняют наблюдаемые свойства. Не имеет значения, является ли действие синхронным или асинхронным.

 @observable boards = [];

boardsService.retrieveBoards().then(boards => {
 this.boards.replace(boards);
})

Во-вторых, вы должны разыменовывать свойство observable только в функции визуализации, а не в конструкторе.

Метки: