React 函数组件使用 Mobx 传值，接口请求后获取数据解决方案

在函数组件中使用 Mobx 传值，如果接口请求需要一段时间才能返回值，可以使用 Mobx 的异步操作来解决。

首先，确保 Mobx 已经存入了值，可以使用 'mobx.runInAction' 来更新 Mobx 的状态，例如：

import { observer } from 'mobx-react';
import { useObservable, useObserver } from 'mobx-react-lite';
import { runInAction } from 'mobx';

const MyComponent = observer(() => {
  const dataStore = useObservable({
    data: null
  });

  useEffect(() => {
    fetchData().then(data => {
      runInAction(() => {
        dataStore.data = data;
      });
    });
  }, []);

  return useObserver(() => (
    <div>
      {dataStore.data ? (
        <div>{dataStore.data}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  ));
});

在上面的例子中，'dataStore' 是一个 Mobx observable 对象，使用 'useObservable' 来创建。在 'useEffect' 中发起接口请求，并在请求返回后使用 'runInAction' 来更新 'dataStore.data' 的值。

在函数组件中，使用 'useObserver' 来包裹需要观察的部分，这样当 'dataStore.data' 更新时，组件会重新渲染。

当接口请求返回数据后，'dataStore.data' 会被更新，组件会显示数据。在请求期间，组件会显示'Loading...'。

这样就可以解决 Mobx 在接口请求完才拿到值的问题。