尝试使用 API 中的 Mobx 显示数据答案

【问题标题】：Try to display data using Mobx from API尝试使用 API 中的 Mobx 显示数据
【发布时间】：2021-05-02 21:38:52
【问题描述】：

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

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

这是我的 useEffect：

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？第一步，我只想显示硬币的名称。

谢谢！

【问题讨论】：

欢迎来到 Stack Overflow DorCo！这不是代码编写服务，所以请尝试自己编写一些代码，如果您有特定问题，请回来。

标签： javascript reactjs api store mobx

【解决方案1】：

结构应该是这样的：

// 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
)

【讨论】：