Question

我正在构建一个演示应用程序，我想使用大量随机数据。我试图找到正确的方法来按顺序初始化mobx存储。我正在使用TypeScript。我的协作有更多的依赖项（沿途其他商店很少），但这大致就是我尝试过的：

ItemStore.ts

export class ItemStore {
  constructor() {
    this.setItems(createItems())
    this.loaded = true
  }
  @observable items: Array<ItemModel> = []
  @observable loaded: boolean = false
  setItems = (items: Array<ItemModel>) => {
    this.items = items
  }
}
export default new ItemStore()

dummyItems.ts

export const createItems = (): Array<ItemModel> => {
  const itemsNumber = randomInt(0, 10)
  let items: Array<ItemModel> = []
  for (var i = 0; i < itemsNumber; i++) {
    items.push(createItem(
    uuid(), // id
    `item${i}`, // name
    ))
  }
  return items      
}

接下来，我有点卡住的地方是，我想使用这些商品的ID（由uuid创建）来初始化另一个商店。我试过的是使用自动运行，看看以前的商店是否使用变量进行了初始化：

class CollaborationStore {
  constructor() {
   autorun(() => {
    if (ItemStore.loaded === true) {
      this.collaborations(createCollaborations())
    }
  }
  @observable collaborations: Array<CollaborationModel> = []
  setCollaborations = (collaborations: Array<ItemCollectionObject>) => {
    this.collaborations = collaborations
  }
}

export default new CollaborationStore()

dummyCollaborations.ts

import ItemStore from './ItemStore'

export const createCollaborations = () => {
  const collaborations: Array<CollaborationModel> = []
  ItemStore.items.forEach((item: ItemModel) => {
   collaborations.concat(
    createCollaboration(
     uuid(), // id
     `collabName`, // name
     item.id // itemId
    )
  })
  return collaborations
}

我面临的问题是，在创建所有项目（将其记录到控制台）之前，将ItemStore.loaded设置为true，因此CollaborationStore不会以正确的数据启动。在我的组件中，我只是导入Stores并尝试访问可观察的变量。

someComponent.tsx

import CollaborationStore from '../CollaborationStore'
import { observer } from 'mobx-react'

...

const someComponent = observer(() => {

...

return (
 <div>{Collaborationstore.collaborations.map((item: CollaborationModel) => (
  <div>Collaboration.name</div>
 ))</div>
)
})

确保一个商店在另一个开始获取数据之前创建所有商品的正确方法是什么？

React＆Mobx：使用其他商店中的变量初始化商店

0 个答案: