尝试使用来自 API 的 Mobx 显示数据

编程问答 2022-05-28

问题描述

我正在制作显示来自 API 的硬币数据的 React 应用程序。 我用 useEffect 做到了，而且效果很好，但现在我正在尝试使用 Mobx 做同样的事情。 我试图创建一个存储文件，从 API 获取数据并存储它，然后将其传递给 App.js，然后在屏幕上显示数据。

我是 Mobx 的新手。请帮我解决我的问题

这是我的使用效果：

useEffect(() => {
    axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false')
      .then(res => {
        setCoins(res.data)
        console.log(res.data)
      }).catch(error => console.log(error))
  },[]);

如何在 Store.js 文件中将此 useEffect 转换为 Mobx？ 第一步，我只想显示硬币的名称。

谢谢！

解决方法

结构应该是这样的：

// Coins Store file
type Coin = {
  name: string;
}

export class CointStore {
  // not sure what is your coins data type,lets assume this is array 
  readonly coins = observable<Coin>([]);

  constructor() {
    makeAutoObservable(this);
  }

  getCoins() {
    return axios.get('https://api.coingecko.com/api/v3/coins/markets')
       .then(response => this.coins.replace(response.data);
  }
}

...

// this is app.js file

import {observer} from 'mobx-react-lite'
import {createContext,useContext,useEffect} from "react"
import {CointStore} from './CointStore'

const CoinsContext = createContext<CointStore>()

const CoinsView = observer(() => {
  const coinStore = useContext(CoinsContext);

  useEffect(() => {
    coinStore.getCoins()
  },[]);

  return (
    <span>
      {coinStore.coins.map(coin => <span>{coin.name}</span>)}
    </span>
  )
})

ReactDOM.render(
  <CoinsContext.Provider value={new CointStore()}>
    <CoinsView />
  </CoinsContext.Provider>,document.body
)
apiapijavascriptmobxmobxmobxmobxreactjsreactjsreactjsreactjsstorestorestore