React 函数组件获取 Mobx 数据并根据条件发起多个接口请求

可以使用useEffect钩子来监听数据的变化，并根据条件进行接口请求。

首先，确保你已经将 mobx 状态管理器注入到了 React 的上下文中，可以使用mobx-react库中的Provider组件。

然后，在函数组件中使用useEffect钩子来监听 mobx 中的数据变化，并根据条件发起接口请求。以下是一个示例代码：

import React, { useEffect } from 'react';
import { observer } from 'mobx-react';
import { useStore } from './store'; // 假设你的 mobx 状态管理器是通过 useStore 钩子获取的

const MyComponent = observer(() => {
  const store = useStore();

  useEffect(() => {
    if (store.condition1) {
      // 发起接口请求1
      fetch('api1')
        .then(response => response.json())
        .then(data => {
          // 更新 mobx 中的数据
          store.setData1(data);
        });
    }

    if (store.condition2) {
      // 发起接口请求2
      fetch('api2')
        .then(response => response.json())
        .then(data => {
          // 更新 mobx 中的数据
          store.setData2(data);
        });
    }
  }, [store.condition1, store.condition2]); // 当条件 1 或条件 2 发生变化时，重新执行 effect

  return (
    <div>
      {/* 使用 mobx 中的数据 */}
      {store.data1.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
});

 export default MyComponent;

在上面的代码中，useEffect钩子中的依赖数组[store.condition1, store.condition2]会监听store.condition1和store.condition2的变化。只有当条件 1 或条件 2 发生变化时，才会重新执行 effect 内部代码。

在代码块中，根据条件store.condition1和store.condition2的值来判断是否发起接口请求，并根据请求返回的数据更新 mobx 中的数据。

最后，在组件中使用 mobx 中的数据进行渲染。

这样，无论是条件 1 还是条件 2 发生变化，都可以根据相应的条件发起接口请求并更新 mobx 中的数据。