javascript - 错误：函数组件不能有引用。你的意思是使用 React.forwardRef() 吗？

Question

我收到错误

错误：函数组件不能有引用。你的意思是使用 React.forwardRef() 吗？

如果您检查我的代码，它是正确的。我也通过了，它说

第 91 行：意外使用“事件”无限制全局变量

如果我做错了什么，我不知道。根据我的研究，我发现可能有一些版本问题，也可能没有。我正在使用最新版本的create react app

import React, { Component } from 'react';
import { AuthUserContext } from '../Session';
import { withFirebase } from '../Firebase';
import NewsList from './NewsList';

import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';
import { Container, Card, CardContent, Button } from '@material-ui/core';
import Form from 'react-bootstrap/Form';

class News extends Component {
  constructor(props) {
    super(props);

    this.state = {
      newsTitle: '',
      newsDescription: '',
      news: [],
      limit: 5,
      loading: false,
      submitted: false,
      error: null,
    };
  }

  componentDidMount() {
    this.onListenForNews();
  }

  onListenForNews = () => {
    this.setState({ loading: true });

    this.props.firebase
      .news()
      .orderByChild('createdAt')
      .limitToLast(this.state.limit)
      .on('value', snapshot => {
        const newsObject = snapshot.val();

        if (newsObject) {
          const newsLis = Object.keys(newsObject).map(key => ({
            ...newsObject[key],
            uid: key,
          }));

          this.setState({
            news: newsLis,
            loading: false,
          });
        } else {
          this.setState({ news: null, loading: false });
        }
      });
  };

  componentWillUnmount() {
    this.props.firebase.news().off();
  }

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };

  onCreateNews = (event, authUser) => {
    this.props.firebase.news().push({
      newsTitle: this.state.newsTitle,
      newsDescription: this.state.newsDescription,
      userId: authUser.uid,
      createdAt: this.props.firebase.serverValue.TIMESTAMP,
    });

    this.setState({
      newsTitle: '',
      newsDescription: '',
      error: null,
      submitted: true,
    });

    event.preventDefault();
  };

  onEditNews = (news, newsTitle, newsDescription) => {
    this.props.firebase.news(news.uid).set({
      ...news,
      newsTitle,
      newsDescription,
      editedAt: this.props.firebase.serverValue.TIMESTAMP,
    });
  };

  onRemoveNews = uid => {
    this.props.firebase.news(uid).remove();
  };

  onNextPage = () => {
    this.setState(
      state => ({ limit: state.limit + 5 }),
      this.onListenForNews,
    );
  };

  render() {
    const { users } = this.props;
    const { newsTitle, newsDescription, news, loading, submitted, error } = this.state;

    return (
      <AuthUserContext.Consumer>
        {authUser => (
          <div>
            {!loading && news && (
              <button type="button" onClick={this.onNextPage}>
                More
              </button>
            )}

            {loading && <div>Loading ...</div>}

            {news && (
              <NewsList
                news={news.map(news => ({
                  ...news,
                  user: users
                    ? users[news.userId]
                    : { userId: news.userId },
                }))}
                onEditNews={this.onEditNews}
                onRemoveNews={this.onRemoveNews}
              />
            )}

            {!news && <div>There are no messages ...</div>}

            <Container maxWidth="lg">
                <ValidatorForm
                    ref="form"
                    onSubmit={event =>
                      this.onCreateNews(event, authUser)
                    }
                >
                    <div>
                        {error && (
                            <div className="alert alert-danger" role="alert">
                                {error.message}
                            </div>
                        )}
                        <Card>
                            <CardContent>
                                <Form.Group>
                                    <TextValidator
                                        label="News Title"
                                        onChange={this.handleChange}
                                        name="newsTitle"
                                        type="text"
                                        value={newsTitle}
                                        variant="outlined"
                                        fullWidth={true}
                                        validators={['required']}
                                        errorMessages={['New title field is required', 'News title is not valid']}
                                    />
                                </Form.Group>
                                <Form.Group>
                                    <TextValidator
                                        label="Description"
                                        onChange={this.handleChange}
                                        name="newsDescription"
                                        type="text"
                                        value={newsDescription}
                                        variant="outlined"
                                        fullWidth={true}
                                        validators={['required']}
                                        errorMessages={['Description field is required']}
                                    />
                                </Form.Group>
                                <Form.Group>
                                    <Button
                                        color="primary"
                                        variant="contained"
                                        type="submit"
                                        fullWidth={true}
                                        size="large"
                                        disabled={submitted}
                                    >
                                        {
                                            (submitted && 'Signing In - Redirecting')
                                            || (!submitted && 'Sign In')
                                        }
                                    </Button>
                                </Form.Group>
                            </CardContent>
                        </Card>
                    </div>
                </ValidatorForm>
            </Container>
          </div>
        )}
      </AuthUserContext.Consumer>
    );
  }
}

export default withFirebase(News);