react-native - 尝试在反应原生 Ignite 模板中使用 MST 时出现“未定义不是对象”错误

Question

我正在使用Ignite 模板进行 react native。我创建了一个简单的对象模型和存储，如下所示：

export const TimeObject = types.model('TimeObject', {
  id: types.identifier,
  hour: types.string,
  minutes: types.string,
  amOrPm: types.enumeration(['AM', 'PM']),
  timeStamp: types.number,
  numOfDrugs: types.number,
});

export const TimeStore = types
  .model('TimeStore', {
    time: types.map(TimeObject),
  })
  .actions(self => ({
    addTime(json) {
      const ids = [];

      json.forEach(timeJson => {
        if (!timeJson.id) {
          timeJson.id = uuid.v1();
        }

        ids.push(timeJson.id);
        self.time.put(timeJson);
      });

      return ids;
    },
  }));

当我在屏幕组件中使用它时：

const { timeStore } = useStores();

 const timeId = timeStore.addTime([
                {
                  hours,
                  mins,
                  amOrPm,
                  timeStamp: timeStamp.getTime(), //With correct values given for inputs
                },
              ]);

我得到未定义的错误。我不确定我做错了什么。我正在 Storybook 上对此进行测试，是否有不同的程序可以将其导入那里？

标签： react-nativereact-native-androidstorybookmobx-state-tree

Answer 1

我可以通过改变ToggleStorybookand RootStoreProviderin的顺序来解决这个问题app.tsx，现在它看起来像这样：

<RootStoreProvider value={rootStore}>
      <ToggleStorybook>
        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
          <RootNavigator
            ref={navigationRef}
            initialState={initialNavigationState}
            onStateChange={onNavigationStateChange}
          />
        </SafeAreaProvider>
      </ToggleStorybook>
</RootStoreProvider>

我认为因为 Storybook 被切换它从未进入 RootStore，因此无法在 Storybook 组件中访问它，但这种方法现在有效。