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

Question

我刚刚学会了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>
}

然后，在我的组件上，当用户单击按钮时，我会做两件事，将选定的食物更改为用户单击的任何内容，并进行 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，它谈论类的东西，看起来与我的设置完全不同，知道如何解决这个问题吗？

谢谢。

Answer 1

getRestaurants是否为mobx action并不重要，因为您正在尝试从异步运行的代码(action之外(修改可观察量(restaurantResults( 因此，在从异步调用中获取结果后，您需要对 mobx 操作中的可观察量运行修改。您可以使用runInActionmobx 实用程序函数。

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

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