Как использовать React Lazy loading для компонента, связанного с redux?

Question

Я очень рад использовать React.Lazy loading, однако мой компонент использует redux, и я получаю предупреждение об ошибке

index.js:1 Предупреждение: функции недействительны в качестве дочерних React. Это может произойти, если вы вернете компонент вместо отрисовки. Или, может быть, вы хотели вызвать эту функцию, а не вернуть ее.

вот код для App.js

import React, { Suspense } from 'react';
import queryString from 'query-string';
import { LoadingSpinner } from '../components/common';
import '../assets/styles.css';

const App = () => {
  const { target } = queryString.parse(window.location.search);
  const NewsComponent = React.lazy(() => import('../components/news/News'));
  const SchoolComponent = React.lazy(() =>
    import('../components/schools/Schools')
  );
  const CalendarComponent = React.lazy(() =>
    import('../components/calendar/Calendar')
  );

  return (
    <main className="max-w-md mx-auto font-display">
      <Suspense fallback={() => <LoadingSpinner />}>
        {target === 'news' && <NewsComponent />}
        {target === 'schools' && <SchoolComponent />}
        {target === 'calendar' && <CalendarComponent />}
      </Suspense>
    </main>
  );
};

export default App;

и вот мой подключенный компонент для ленивой загрузки

import React, { useEffect, useState, MouseEvent } from 'react';
import { connect } from 'react-redux';
import { fetchNews } from '../../actions/news';
import NewsList from './NewsList';
import NewsTips from './NewsTips';
import { NewsType, StoreStateType } from '../../types';
import queryString from 'query-string';
import { Error } from '../common';

interface NewsProps {
  news: NewsType[];
  fetchNews(): void;
  isLoading: boolean;
  hasError: boolean;
}
interface NewsState {
  displayTips: boolean;
}

const News = (props: NewsProps, state: NewsState) => {
  const { news, isLoading, hasError, fetchNews } = props;
  const [displayTips, setDisplayTips] = useState(false);

  useEffect(() => {
    if (schools) {
      fetchNews();
    }

    showTips === 'true' ? setDisplayTips(true) : setDisplayTips(false);
  }, []);

  const styledImage = {
    backgroundImage:
      'url(https://engadinew-p65.test.schools.nsw.gov.au/content/dam/doe/sws/global/global-master/images/assets/school-finder.png)',
  };

  return (
    <section className="p-4">
      <h1 className="display-1 text-blue-dark mb-4">News</h1>
      {isLoading && <div>Loading</div>}
      {hasError && <Error />}
    </section>
  );
};

const mapStateToProps = ({
  news,
  isLoading,
  hasError,
}: StoreStateType): {
  news: NewsType[];
  isLoading: boolean;
  hasError: boolean;
} => {
  return { news, isLoading, hasError };
};

export default connect(mapStateToProps, { fetchNews })(News);

Может ли это пойти в производство, даже если есть предупреждение? Есть идеи, как исправить предупреждение?

Answer 1

Изменить эту строку <Suspense fallback={() => <LoadingSpinner />}> к <Suspense fallback={<LoadingSpinner />}>