Question

早上好！

我正在开始反应挂钩，但是当我想使用useEffect时会抛出以下错误：

 Line 4:5:  React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

代码如下：

profile.js

import React, { useEffect } from 'react';

function profile(props) {
    useEffect(() => {
        document.title = props.nameAtributte;
     }, [props.nameAtributte])
     

    return (
        <div style={{background:"yellow"}}>
            It's my profile component {props.nameAtributte}
        </div>
    );
}
export default profile;

App.js

import React, {useState, useEffect} from 'react';
import Profile from './components/profile';
//import logo from './logo.svg';
//import './App.css';

function App() {
  const [nombre, changeName] = useState('Juan Parez');
  function nombreInput_onChanged(e){
    changeName (e.target.value);
  }
  return (
    <div className="App">
      <h1>{nombre} eres digno, suficiente e ilimitado</h1>
      <input type="text" name="nombreInput" id="nombreInput" value={nombre} onChange={nombreInput_onChanged} />
     <Profile nameAtributte={nombre}/>
    </div>
  );
}
export default App;

package.json

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },

会发生什么？

我正在这里查看一些解决方案，但是它们对我不起作用。

非常感谢您的帮助。

Answer 1

组件名称必须以大写字母开头。由于您的概要文件组件名称以“ p”开头，因此react不会将其视为有效的功能组件。只需将组件名称更改为Profile，它应该可以正常工作

Answer 2

JSX的规则之一是组件名称必须以大写字母开头。

如果您的JSX文件包含以小写字母作为首字母的组件，那么React会将其称为内置组件，例如<span>或{{1} }不是反应组件。

像<div>这样的点符号组件和任何以大写字母开头的组件都表明JSX标签引用了React组件。

这就是为什么您收到错误消息的原因

<UserContext.Provider>

因此，在您的情况下，只需将函数名称更改为

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

您不必更改文件名，即function Profile(){ //your code }，对此没有这样的规则。

您可以从here看到Official React hooks规则手册。

React Hook函数useEffect

2 个答案: