mobx UseObserver не перерисовывает при обновлении магазина - PullRequest
Новая
       36

mobx UseObserver не перерисовывает при обновлении магазина

0 голосов
/ 26 февраля 2020

Я пытаюсь создать простое приложение реакции, используя MobX, TypeScript и React Hooks, где я буду вводить название города и, нажав кнопку добавить , оно обновит список города в пользовательском интерфейсе с добавленным городом.

Демоверсия CodeSandbox здесь

Проблема в том, что список не обновляется, когда я нажимаю кнопку добавления с новым названием города .

Пожалуйста, помогите

1 Ответ

0 голосов
/ 27 февраля 2020

С вашим кодом есть две проблемы:

  1. Не используйте useLocalStore (context.tsx) для создания магазина, создайте магазин, напрямую вызвав функцию магазина, и оберните возвращаемое значение 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 компонента должно быть заключено в функцию useObserver из mobx-react-lite 
// 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>
    );
  });
};

песочница с кодом

...