Не могу получить значение вызова ajax в действии в mobx, вместо этого я получаю Proxy - PullRequest
Новая
       7

Не могу получить значение вызова ajax в действии в mobx, вместо этого я получаю Proxy

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

Я только что изучил Mobx,

У меня есть эта простая установка, где у меня есть мой магазин с некоторыми вещами, такими как:

selectedFood: "pizza"

и некоторыми функциями, которые делают что-то как изменение выбранного значения:

selectFood: (food) => store.selectedFood = food,

Это мой базис c store: 

const StoreProvider = ({children}) => {
  const store = useLocalStore(() => ({
    selectedFood: "pizza",
    selectFood: food => store.selectedFood = food,
    restaurantResults: [],
    getRestaurnts: () => {
        fetchRestaurants('pizza')
            .then(res => store.restaurantResults.push(res))
    },
  }))
  return <StoreContext.Provider value={store} >{children}</StoreContext.Provider>
}

Затем на моем компоненте, когда пользователь нажимает кнопку Я делаю две вещи, меняю selectedFood на то, на что нажал пользователь, а также звоню ajax, чтобы получить еду из API: 

const RestaurantsChooser = () => {
  const store = React.useContext(StoreContext);

  function handleClick(food) {
    store.selectFood(food);
    store.getRestaurants(food);
  }

  return useObserver(() => (
    <div className="pa2">
      <p>{store.selectedFood}</p>
        <button onClick={e => handleClick(e.target.value)}  value="pizza" className="pa2 bn br2 mh1">Pizza</button>
        <button onClick={e => handleClick(e.target.value)} value="burger" className="pa2 bn br2 mh1">Burger</button>
        <button onClick={e => handleClick(e.target.value)} value="sushi" className="pa2 bn br2 mh1">Sushi</button>
      <div className="flex">

        {store.restaurantResults.map((rest, i) => {
          return (
            <div key={i} className="pa2">
              <img src={rest.image_url} alt="restuarant"/>
              <p>{rest.name}</p>
              <p>Reviews{rest.review_count}</p>
            </div>
          )
        })}
      </div>
    </div>
  ));
};

Но когда я пытаюсь l oop сверх store.restaurantResults я получаю прокси вместо результатов, но если в моем магазине установлена ​​функция getRestaurnts, я утешаю ответ fetchRestaurants, результаты есть, но почему-то они не передаются моему компоненту.

Я думаю, мне нужно что-то сделать с вызовом ajax в магазине, так как он асин c, но все, что я могу найти в документации, это ссылка: https://mobx.js.org/best/actions.html, которая говорит о вещах с классами, которые выглядят совершенно иначе, чем мои настройки, любые идеи, как х это?

Спасибо.

1 Ответ

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

Неважно, является ли getRestaurants mobx action, потому что вы пытаетесь изменить наблюдаемый (restaurantResults) из кода, который выполняется асинхронно (за пределами исходного action). Поэтому после получения результатов из асинхронного вызова c вам нужно запустить модификации наблюдаемого внутри действия mobx. Вы можете использовать runInAction служебную функцию mobx. 

    getRestaurnts: () => {
        fetchRestaurants('pizza')
            .then(res => 
               runInAction(()=>{
                 store.restaurantResults.push(res)
                })
               )
    },

Подробнее о работе с асинхронным кодом и mobx вы можете прочитать в официальной документации .

...