reactjs - 使用 React Hooks 时来自 ESLint 的警告消息

Question

我目前正在将我的应用程序更新到 React 16.8，这样我就可以使用很棒的新 Hook 功能。更新 React 包(以及所有依赖项)不是问题，一切正常。但是，当我尝试设置 ESLint 时，当我尝试使用 Hook 时，它总是给我以下错误:

React Hook "useEffect" is called in function "projectInfo" which is neither a React function component or a custom React Hook function

我的组件如下所示:

import React, { useState} from 'react';

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

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

export default myComponent;

我的 .eslintsrc 文件如下所示:

{
    "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"
    }
}

编辑: 在错误中，它表示 projectInfo 中存在错误。为简单起见，我用上面的 myComponent 代码更改了它。项目信息如下所示:

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

Answer 1

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

参见 eslint-plugin-react-hooks code source

/**
 * Checks if the node is a React component name. React component names must
 * always start with a non-lowercase letter. So `MyComponent` or `_MyComponent`
 * are valid component names for instance.
 */

function isComponentName(node) {
  if (node.type === 'Identifier') {
    return !/^[a-z]/.test(node.name);
  } else {
    return false;
  }
}