如何对 redux 连接组件使用 React 延迟加载？

Question

我对使用 React.Lazy 加载感到非常兴奋，但是我的组件正在使用 redux 并且我收到警告错误

index.js:1 警告：函数作为 React 子项无效。如果您 return 一个组件而不是来自渲染，则可能会发生这种情况。或者您可能打算调用此函数而不是 return 它。

这是 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 />}>

如何对 redux 连接组件使用 React 延迟加载？

How to use React Lazy loading for redux connected component?

reactjs

redux

react-lazy-load