如何使用Mobx将Promise输出作为prop传递

Question

在我的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() {
     ...
  }
}

我在store / index.js中尝试过此操作：

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

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

但是我得到这个错误：

Answer 1

首先，Mobx中的操作没有返回值。它们只是改变了可观察的属性。动作是同步还是异步都没有关系。

@observable boards = [];

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

第二，您应该仅在render函数中而不是在构造函数中取消引用observable属性。