Rxjs和React状态挂钩导致多个API调用和重新呈现

import React, { useState, useEffect } from 'react';
import { from, combineLatest } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const MyComponent = () => {
  const [data1, setData1] = useState(null);
  const [data2, setData2] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = () => {
      const api1$ = from(fetch('api1')); // 第一个API调用
      const api2$ = from(fetch('api2')); // 第二个API调用

      combineLatest(api1$, api2$)
        .pipe(
          switchMap(([result1, result2]) => {
            setData1(result1);
            setData2(result2);
            setIsLoading(false);
          })
        )
        .subscribe();
    };

    fetchData();
  }, []);

  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <div>
          <p>Data 1: {data1}</p>
          <p>Data 2: {data2}</p>
        </div>
      )}
    </div>
  );
};

export default MyComponent;