我想使用反应钩子将我的反应类组件转换为功能组件。它给出了如下错误

Question

我想使用反应钩子将我的反应类组件转换为功能组件。它给出了如下错误。

Failed to compile
./src/templates/addPost.js
  Line 6:29:  React Hook "useState" is called in function "addPost" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

搜索关键字以了解有关每个错误的更多信息。 此错误发生在构建期间，无法消除。

我的代码是：

const AddPost  = (props)=> {
const [post, setPost] = useState({
    id: Math.random(),
    title: '',
    body: ''
})

const handleInput = (target, value) =>{
    return {
        id: post.id,
        title: target.id == 'title' ? value : post.title,
        body: target.id == 'body' ? value : post.body
    }
}

const handleSubmit = (e)=>{
    e.preventDefault()
    console.log(post)
    props.actionPost(post)
    e.target.reset()
    props.history.push('/post/'+ post.id)
}
  

 return ( <form onSubmit={handleSubmit}>
           <input onChange={(e)=>{setPost(handleInput(e.target, e.target.value))}}  type="text" id='title'/>
                            
          <input onChange={(e) => { setPost(handleInput(e.target, e.target.value))}} type="text" id='body'/>
                            
          <button type="submit" onSubmit={handleSubmit}>Submit</button>
         </form>)

}

const mapDispatchToProps = (dispatch) =>{
    return {
        actionPost: (post)=>{
            dispatch(addPostAction(post))
        }
    }
}
export default connect(null, mapDispatchToProps)(AddPost)

Answer 1

你只能在 React 组件中使用钩子。通常，创建具有 PascalCase 名称的功能组件是一种很好的风格，并且 Hooks eslint 规则强制执行此操作。

这是来自eslint-plugin-react-hooks 的代码，负责生成该错误消息。

/**
 * 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;
  }
}

因此，Hooks Rule 不会将任何以小写字母开头的函数视为函数式组件。

这种风格的功能组件由 ESLint 在编译时强制执行。这是一个功能组件的示例，它正在执行您正在尝试执行的操作。

export const AddPost = (props) => {
  const [post, setPost] = useState({
    id: Math.random(),
    title: "",
    body: "",
  });

  const handleInput = (target, value) => {
    return {
      id: post.id,
      title: target.id == "title" ? value : post.title,
      body: target.id == "body" ? value : post.body,
    };
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(post);
    props.actionPost(post);
    e.target.reset();
    props.history.push("/post/" + post.id);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        onChange={(e) => {
          setPost(handleInput(e.target, e.target.value));
        }}
        type="text"
        id="title"
      />

      <input
        onChange={(e) => {
          setPost(handleInput(e.target, e.target.value));
        }}
        type="text"
        id="body"
      />

      <button type="submit" onSubmit={handleSubmit}>
        Submit
      </button>
    </form>
  );
};

Answer 2

如果 addPost 是组件，那么“a”应该是大写字母。每个组件名称都应该以大写字母开头..

const AddPost  = (props)=>