mobx UseObserver 不会在商店更新时重新渲染答案

【问题标题】：mobx UseObserver not re-rendering on store updatemobx UseObserver 不会在商店更新时重新渲染
【发布时间】：2020-02-26 15:56:18
【问题描述】：

我正在尝试使用 MobX、TypeScript 和 React Hooks 创建一个简单的 React 应用程序，我将在其中键入一个城市的名称，然后单击 add 按钮，它将更新列表UI 中带有新添加城市的城市。

CodeSandbox demo here

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

请帮忙

【问题讨论】：

标签： reactjs typescript react-hooks mobx mobx-react

【解决方案1】：

你的代码有两个问题：

不要使用useLocalStore（context.tsx）创建store，直接调用store函数创建store，将createStore函数（store.ts）的返回值包裹在observable中

  // 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>;

CityView 组件的返回值需要包装在来自mobx-react-lite 的useObserver 函数中

// 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>
    );
  });
};

code sandbox

【讨论】：