0

我对使用 React.Lazy 加载感到非常兴奋，但是我的组件正在使用 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);

即使有警告，这也能投入生产吗？知道如何解决警告吗？

4

1 回答 1

1

将此行更改<Suspense fallback={() => <LoadingSpinner />}>为<Suspense fallback={<LoadingSpinner />}>

于 2020-06-12T05:49:46.260 回答