Mobx UseObserver无法在商店更新时重新呈现

Question

我正在尝试使用MobX，TypeScript和React Hooks创建一个简单的react应用，在其中输入城市名称，然后单击 add 按钮，它将更新列表。用户界面中的城市以及新添加的城市。

CodeSandbox demo here

问题是，当我单击带有城市新名称的添加按钮时，列表没有得到更新。

请帮助

Answer 1

您的代码有两个问题：

1. 请勿使用useLocalStore（context.tsx）创建商店，请直接调用store函数来创建商店，并包装createStore函数的返回值（{{1 }}）在store.ts
中

observable

  // context.tsx
  // const store = useLocalStore(createStore);
  const store = createStore()

1. 您需要将// store.ts import { observable } from "mobx"; export const createStore = () => { const store = observable({ Cities: ["Gotham"], get allCities(): Array<string> { return store.Cities; }, get cityCount(): Number { return store.Cities.length; }, addCity: (city: string) => { console.log("store: adding city: " + city); store.Cities.push(city); console.log(store.Cities); } }); return store; }; export type TStore = ReturnType<typeof createStore>; 组件的返回值包装在CityView中的useObserver函数中

mobx-react-lite

code sandbox