Javascript 错误：函数组件不能有引用。您是想使用React.forwardRef（）吗？

我发现了错误

错误：函数组件不能有引用。你是想用 React.forwardRef（）

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

第91行：意外使用“event”no restricted globals

如果我做错了什么，我不知道。根据我的研究，我发现有一些版本的问题，也许与否。我使用的是最新版本的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);

import React，{Component}来自'React'；
从“../Session”导入{AuthUserContext}；
从“../Firebase”导入{withFirebase}；
从“/NewsList”导入新闻列表；
从“react material ui form validator”导入{ValidatorForm，TextValidator}；
从“@material ui/core”导入{容器、卡片、卡片内容、按钮}；
从“react引导/表单”导入表单；
类新闻扩展组件{
建造师（道具）{
超级（道具）；
此.state={
新闻标题：“”，
新闻描述：“”，
新闻：[]，
限额：5，
加载：false，
提交：假，
错误：null，
};
}
componentDidMount（）{
这个.onListenForNews（）；
}
onListenForNews=（）=>{
this.setState（{loading:true}）；
这是消防基地
.新闻（
.orderByChild（'createdAt'）
.limitToLast（this.state.limit）
.on（'value'，快照=>{
const newobject=snapshot.val（）；
if（新闻对象）{
const newsLis=Object.keys（newobject.map）（key=>({
…新闻对象[键]，
uid：钥匙，
}));
这是我的国家({
新闻：newsLis，
加载：false，
});
}否则{
this.setState（{news:null，load:false}）；
}
});
};
组件将卸载（）{
this.props.firebase.news（）.off（）；
}
handleChange=（事件）=>{
this.setState（{[event.target.name]：event.target.value}）；
};
onCreateNews=（事件，authUser）=>{
this.props.firebase.news（）.push({
newsTitle:this.state.newsTitle，
newsDescription:this.state.newsDescription，
userId:authUser.uid，
createdAt:this.props.firebase.serverValue.TIMESTAMP，
});
这是我的国家({
新闻标题：“”，
新闻描述：“”，
错误：null，
提交：对，
});
event.preventDefault（）；
};
onEditNews=（新闻、新闻标题、新闻描述）=>{
这个.props.firebase.news（news.uid）.set({
…新闻，
新闻标题，
新闻描述，
editedAt:this.props.firebase.serverValue.TIMESTAMP，
});
};
onRemoveNews=uid=>{
this.props.firebase.news（uid.remove（）；
};
onNextPage=（）=>{
这是我的国家(
state=>（{limit:state.limit+5}），
这是.onListenForNews，
);
};
render（）{
const{users}=this.props；
const{newsttitle，newsDescription，news，loading，submitted，error}=this.state；
返回(
{authUser=>(
{！正在加载&新闻&&(
更多
)}
{正在加载和正在加载…}
{新闻&&(
({
…新闻，
用户：用户
？用户[news.userId]
：{userId:news.userId}，
}))}
onEditNews={this.onEditNews}
onRemoveNews={this.onRemoveNews}
/>
)}
{！新闻&&没有消息…}
this.onCreateNews（事件，authUser）
}
>
{错误&&(
{error.message}
)}
{
（已提交和“登录-重定向”）
||（！已提交并“登录”）
}
)}
);
}
}
使用Firebase导出默认值（新闻）；

什么是

事件

？它的定义是什么？您的意思是不立即调用提交处理程序吗？i、 e.是否应该是

onSubmit={event=>this.createNews（event，authUser）}

？这也不是必需的，那么我不理解你所说的“它也不是必需的”是什么意思。我将你的代码转储到编辑器中，修复了

onSubmit

回调，关于

事件的警告消失了。关于
ref
的某个地方仍然有错误吗？你能提供更多的错误信息吗（你至少有一个组件/文件和一个行号吗）？Hi Drew，最新的一个正在工作。onSubmit={event=>this.createNews（event，authUser）}我需要传递事件