时间戳

首页 > 解决方案 > 无法在 mobx 中的操作中获取 ajax 调用的值，而是获得代理

javascript - 无法在 mobx 中的操作中获取 ajax 调用的值，而是获得代理

问题描述

我刚学了Mobx，

我有这个简单的设置，我的商店有一些东西，比如：

selectedFood: "pizza"

以及一些执行诸如更改所选值之类的功能：

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

这是我的基本商店：

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

但是当我尝试循环时，store.restaurantResults我得到一个代理而不是结果，但是如果getRestaurnts在我商店的函数上我控制台fetchRestaurants结果的响应在那里，但不知何故它们没有传递给我的组件。

我想我需要对商店中的 ajax 调用做一些事情，因为它是异步的，但我在文档中只能找到这个链接：https ://mobx.js.org/best/actions.html ，它讨论了与类，看起来与我的设置完全不同，知道如何解决这个问题吗？

谢谢。

标签： javascriptreactjsmobx

解决方案

getRestaurants是否是 a并不重要， mobx action因为您正试图restaurantResults从异步运行的代码（初始之外）修改 observable ( action) 因此，在从异步调用中获得结果后，您需要在 observable 内部运行修改mobx 动作。您可以使用runInActionmobx 实用程序功能。

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

您可以在官方文档中阅读更多如何使用异步代码和 mobx 。

推荐阅读