React 16.8升级后使用Hooks遭遇ESLint报错问题咨询

嗨，这个问题我太熟了！你的ESLint报错根本原因很简单——你的组件名是小写开头的projectInfo。

ESLint的react-hooks/rules-of-hooks规则是跟着React的官方命名约定走的：React函数组件必须以大写字母开头，只有这样ESLint才能识别出这是一个React组件，而不是普通的JS函数。你现在把组件命名成小写，ESLint自然会把它当成普通函数，然后报错说你在非组件/非Hook函数里调用了Hook。

解决方案：把组件名改成大写开头 #

只需要修改组件的命名，同时同步更新导出时的引用即可：

// 把组件名从projectInfo改成ProjectInfo
const ProjectInfo = props => {
  const [createdLink, setCreatedLink] = useState(null);
  const [getProjectStatus, asyncGetProject] = useAsyncCall(props.getProject);
  const [generateLinkStatus, asyncGenerateLink] = useAsyncCall(api.questionnaire.generateQuestionnaireToken);

  // ComponentWillMount
  useEffect(() => {
    if (!props.project) {
      asyncGetProject(props.match.params.id);
    }
  }, []);

  const generateQuestionnaireLink = async () => {
    const response = await asyncGenerateLink(props.project.questionnaireId);
    const createdLink = `${window.location.host}/questionnaire/${response.data.id}`;
    setCreatedLink(createdLink);
  };

  const { translate, project, updateProject } = props;
  const errorMessage = generateLinkStatus.error.message || getProjectStatus.error.message;

  return (
    <div className={styles.profileContainer}>
      <Message message={errorMessage} status={'error'} />
      <BackButton />
      <Loading isVisible={getProjectStatus.loading} />
      {project && (
        <Fragment>
          <EditableForm entity={project} onSubmit={updateProject}>
            <Label text={translate('projectName')} name={'name'} />
            <Checkbox text={translate('isPublic')} name={'isPublic'} />
          </EditableForm>
          <Loading isVisible={generateLinkStatus.loading} />
          <Button text={translate('generateButton')} clickHandler={generateQuestionnaireLink} />
          <br />
          {createdLink && <span>{createdLink}</span>}
        </Fragment>
      )}
    </div>
  );
};

const mapStateToProps = state => {
  return {
    translate: getTranslate(state.locale),
    project: state.project.currentProject
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getProject: id => dispatch(actions.getProject(id)),
    updateProject: (id, params) => dispatch(actions.updateProject(id, params))
  };
};

// 这里的组件名也要同步改成ProjectInfo
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ProjectInfo);

额外提醒 #

你提供的myComponent示例其实也存在同样的命名问题，虽然它没触发报错（因为没用到useEffect这类Hook），但为了规范和避免后续问题，建议也改成MyComponent哦。

另外检查了你的.eslintrc配置，react-hooks插件和规则都已经正确启用了，所以不需要调整配置，只要改组件名就能解决问题啦！

内容的提问来源于stack exchange，提问作者Bob van 't Padje