Reactjs 使用React挂钩时从ESLint发出警告消息

我目前正在更新我的应用程序，使之适应React 16.8，这样我就可以使用令人敬畏的新钩子功能。更新React包（以及所有依赖项）不是问题，一切正常。但当我尝试设置ESLint时，当我尝试使用钩子时，它总是给我以下错误：

React钩子“useffect”在函数“projectInfo”中调用，该函数既不是React函数组件，也不是自定义React钩子函数

我的组件如下所示：

import React, { useState} from 'react';

const myComponent = () => {
  const [counter, setCounter] = useState(0);

  return <span onClick={() => setCounter(counter + 1)}>{counter}</span>;
};

export default myComponent;

{
    "extends": ["react-app"],
    "plugins": [
        "react-hooks"
      ],
    "rules": {
        "no-console": ["warn", { "allow": ["info", "error"] }],
        "quotes": ["warn", "single"],
        "semi": ["warn", "always"],
        "no-debugger": ["warn"],
        "eqeqeq": ["warn"],
        "no-else-return": ["warn"],
        "no-extra-bind": ["warn"],
        "jsx-a11y/href-no-hash": false,
        "prefer-destructuring": [
            "warn",
            {
                "array": true,
                "object": true
            },
            {
                "enforceForRenamedProperties": false
            }
        ],
        "react-hooks/rules-of-hooks": "warn"
    }
}

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))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(projectInfo);

编辑： 在错误中，它表示

projectInfo

中有错误。为了简单起见，我用上面的

myComponent

代码对其进行了更改。projectinfo如下所示：

import React, { useState} from 'react';

const myComponent = () => {
  const [counter, setCounter] = useState(0);

  return <span onClick={() => setCounter(counter + 1)}>{counter}</span>;
};

export default myComponent;

{
    "extends": ["react-app"],
    "plugins": [
        "react-hooks"
      ],
    "rules": {
        "no-console": ["warn", { "allow": ["info", "error"] }],
        "quotes": ["warn", "single"],
        "semi": ["warn", "always"],
        "no-debugger": ["warn"],
        "eqeqeq": ["warn"],
        "no-else-return": ["warn"],
        "no-extra-bind": ["warn"],
        "jsx-a11y/href-no-hash": false,
        "prefer-destructuring": [
            "warn",
            {
                "array": true,
                "object": true
            },
            {
                "enforceForRenamedProperties": false
            }
        ],
        "react-hooks/rules-of-hooks": "warn"
    }
}

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))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(projectInfo);

constprojectinfo=props=>{
const[createdLink，setCreatedLink]=useState（null）；
const[getProjectStatus，asyncGetProject]=UseAyncCall（props.getProject）；
const[generateLinkStatus，asyncGenerateLink]=UseAyncCall（api.inventory.generateQuestionnaireToken）；
//组件将安装
useffect（（）=>{
如果（！props.project）{
asyncGetProject（props.match.params.id）；
}
}, []);
const generateQuestionnaireLink=async（）=>{
const response=wait asyncGenerateLink（props.project.questionnaireId）；
const createdLink=`${window.location.host}/inventory/${response.data.id}`；
setCreatedLink（createdLink）；
};
const{translate，project，updateProject}=props；
const errorMessage=generateLinkStatus.error.message | | | getProjectStatus.error.message；
返回(
{项目&&(


{createdLink&&{createdLink}
)}
);
};
常量mapStateToProps=状态=>{
返回{
translate:getTranslate（state.locale），
项目：state.project.currentProject
};
};
const mapDispatchToProps=调度=>{
返回{
getProject:id=>dispatch（actions.getProject（id）），
updateProject：（id，params）=>dispatch（actions.updateProject（id，params））
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（projectInfo）；

这里的问题是组件名称以小写字母开头

看

---

什么是“projectInfo”？你能显示“projectInfo”的代码吗？我在问题中添加了projectInfo组件。请参见编辑部分