我试图使用反应钩子来解决一个简单的问题

const [personState,setPersonState] = useState({ DefinedObject });

具有以下依赖关系。

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
}

但我仍然得到以下错误:

/ src / App.js 第7行: React钩子useState在函数中被调用 “app”既不是React函数组件,也不是自定义React 钩子函数react-hooks/rules-of-hooks 39行: 'state'没有定义 no-undef 搜索关键字以了解关于每个错误的更多信息。

组件代码如下:

import React, {useState} from 'react'; 
import './App.css'; 
import Person from './Person/Person'; 

const app = props => { 
    const [personState, setPersonSate] = useState({ person:[ {name:'bishnu',age:'32'}, {name:'rasmi',age:'27'}, {name:'fretbox',age:'4'} ], }); 
    return (
        <div className="App"> 
            <h2>This is react</h2> 
            <Person name={personState.person[1].name} age="27"></Person>
            <Person name={personState.person[2].name} age="4"></Person> 
        </div> ); 
    };
    export default app;

人组件

import React from 'react'; 

const person = props => { 
    return( 
        <div>
            <h3>i am {props.name}</h3>
            <p>i am {props.age} years old</p>
            <p>{props.children}</p>
        </div> 
    )
};

export default person; 

当前回答

正如Yuki已经指出的那样,解决方案是将组件名称大写。需要注意的是,不仅“默认”App组件需要大写,所有组件都需要大写:

const Person = () => {return ...};

export default Person;

这是由于eslint-plugin-react-hooks包,特别是RulesOfHooks.js脚本中的isComponentName()函数。

Hooks FAQs官方解释:

我们提供了一个ESLint插件,它强制hook的规则以避免错误。它假定任何以“use”开头且后面紧跟大写字母的函数都是Hook。我们认识到这种启发式并不完美,可能会有一些误报,但如果没有一个生态系统范围内的约定,就没有办法让Hooks很好地工作——较长的名称会阻碍人们采用Hooks或遵循约定。

其他回答

试着把“app”大写

const App = props => {...}

export default App;

在React中,组件需要大写,自定义钩子需要从使用开始。

不要使用箭头函数创建功能组件。

按照下面的例子做:

function MyComponent(props) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

Or

//IMPORTANT: Repeat the function name

const MyComponent = function MyComponent(props) { 
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
};

如果你有“ref”的问题(可能在循环中),解决方案是使用forwardRef():

// IMPORTANT: Repeat the function name
// Add the "ref" argument to the function, in case you need to use it.

const MyComponent = React.forwardRef( function MyComponent(props, ref) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
});

正如Yuki已经指出的那样,解决方案是将组件名称大写。需要注意的是,不仅“默认”App组件需要大写,所有组件都需要大写:

const Person = () => {return ...};

export default Person;

这是由于eslint-plugin-react-hooks包,特别是RulesOfHooks.js脚本中的isComponentName()函数。

Hooks FAQs官方解释:

我们提供了一个ESLint插件,它强制hook的规则以避免错误。它假定任何以“use”开头且后面紧跟大写字母的函数都是Hook。我们认识到这种启发式并不完美,可能会有一些误报,但如果没有一个生态系统范围内的约定,就没有办法让Hooks很好地工作——较长的名称会阻碍人们采用Hooks或遵循约定。

首先,你需要大写你的组件的FirstLetter,在你的情况下app应该是app, person应该是person。

我试图复制你的代码,希望找到问题所在。由于你没有分享你如何调用App组件,我只能看到一种方法导致这个问题。

这是CodeSandbox中的链接:无效钩子调用。

为什么?因为下面的代码是错误的:

ReactDOM.render(App(), rootElement);

它应该是:

ReactDOM.render(<App />, rootElement);

更多信息,你应该阅读规则的钩子-反应

希望这能有所帮助!

在JSX中,小写标记名被认为是html原生组件。 为了让react能够将该函数识别为react组件,需要将名称大写。

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX <Foo /> expression, Foo must be in scope.

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components