Reactjs mobx UseObserver在存储更新时未重新呈现
我正在尝试使用MobX、TypeScript和react钩子创建一个简单的react应用程序,我将在其中键入一个城市的名称,单击一个添加按钮,它将用新添加的城市更新UI中的城市列表 问题是,当我用城市的新名称单击“添加”按钮时,列表没有得到更新Reactjs mobx UseObserver在存储更新时未重新呈现,reactjs,typescript,react-hooks,mobx,mobx-react,Reactjs,Typescript,React Hooks,Mobx,Mobx React,我正在尝试使用MobX、TypeScript和react钩子创建一个简单的react应用程序,我将在其中键入一个城市的名称,单击一个添加按钮,它将用新添加的城市更新UI中的城市列表 问题是,当我用城市的新名称单击“添加”按钮时,列表没有得到更新 请帮助您的代码有两个问题: 不要使用useLocalStore(context.tsx)来创建存储,通过直接调用store函数来创建存储,并将createStore函数(store.ts)的返回值包装在一个可观察的 您的代码有两个问题: 不要使用use
请帮助您的代码有两个问题:
useLocalStore
(context.tsx
)来创建存储,通过直接调用store函数来创建存储,并将createStore
函数(store.ts
)的返回值包装在一个可观察的
您的代码有两个问题:
useLocalStore
(context.tsx
)来创建存储,通过直接调用store函数来创建存储,并将createStore
函数(store.ts
)的返回值包装在一个可观察的
// context.tsx
// const store = useLocalStore(createStore);
const store = createStore()
// 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>;
// city.tsx
import { useObserver } from "mobx-react-lite";
export const CityView: React.FC<{ cities: string[] }> = ({ cities }) => {
return useObserver(() => {
return (
<ul>
{cities.map((city: string) => (
<li key={city}>{city}</li>
))}
</ul>
);
});
};