Question

我正在尝试使用React钩子解决一个简单问题

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

具有以下依赖性。

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

但仍然出现错误

./ src / App.js

第7行：
  在函数中调用React Hook“ useState”   “ app”既不是React函数组件也不是自定义React   挂钩函数react-hooks / rules-of-hooks

第39行：
  未定义“状态”
  没有undef

搜索关键字以详细了解每个错误。

Answer 1

尝试大写“ app”之类的

const App = props => {...}

导出默认应用；

Answer 2

使用const App代替const app

Answer 3

只需尝试将您的应用名称大写

const App = props => {...}

export default App;

Answer 4

在函数名称中使用首字母大写。例如：-功能App {}

Answer 5

函数的第一个字符应为大写

Answer 6

反应组件（包括功能和类）必须以大写字母开头。喜欢

const App=(props)=><div>Hey</div>

class App extends React.Component{
   render(){
     return <div>Hey</div>
   }
}

React通过遵循此语义来标识用户定义的组件。 React的JSX转换为React.createElement函数，该函数返回dom节点的对象表示形式。该对象的type属性告诉它是用户定义的组件还是div元素之类的dom元素。因此，遵循这种语义很重要

由于useState挂钩只能在功能组件（或自定义挂钩）中使用，因此这就是您收到错误的原因，因为react首先无法将其标识为用户定义的组件。 / p>

useState也可以在定制钩子内部使用，该钩子用于可重用性和逻辑抽象。因此，根据钩子规则，自定义钩子的名称必须以“ use”前缀开头，并且必须位于camelCase

Answer 7

我觉得我们在乌迪米（Udemy）正在做同样的课程。

如果是，请大写

topic z

收件人

const app

表现出色

const App

收件人

export default app

对我来说很好。

Answer 8

据我所知，此包装中包含短绒棉。并且它要求您的组件应该从大写字母开始。请检查一下。

但是对我来说，这很可悲。

Answer 9

在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

Answer 10

您的代码

browser.find_elements_by_css_selector('[class*="product-information__Title"]')

把函数名改成大写，像这样

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;

它会起作用，谢谢。

Answer 11

组件应以大写字母开头。还记得更改要导出的行中的第一个字母！

Answer 12

React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

对于以下错误，请大写字母首字母（例如），并大写。

const App  = props => {
...}
export default App;

Answer 13

将应用程序大写为App肯定会起作用。

Answer 14

使函数名称大写。这对我有用。

export default function App() { }

Answer 15

我有同样的问题。原来是在“ App”中将“ A”大写的问题。另外，如果要导出，请执行以下操作：export default App;确保也导出相同名称的“ App”。

Answer 16

替换此

export default app;

与此

export default App;

Answer 17

这是因为React Hooks的ESLint规则。在此处找到规则的链接：

ESLint rule for React Hooks

截至目前，该规则在行号中进行了描述。 44。

Answer 18

使用大写字母定义功能组件名称/ React挂钩自定义组件。 “ const'app'应该是const'App'。

App.js

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

const App = props => {
  const [personState, setPersonState] = useState({
    persons : [
          {name: 'a', age: '1'},
          {name: 'b', age: '2'},
          {name: 'c', age: '3'}
    ]
  });

    return (
      <div>
     <Person name = {personState.persons[0].name} age={personState.persons[0].age}> First </Person>
     <Person name = {personState.persons[1].name} age={personState.persons[1].age}> Second </Person>
     <Person name = {personState.persons[2].name} age={personState.persons[2].age}> Third </Person>    
    );
};
export default App;

Person.js

import React from 'react';

const person = (props) => {
return (
        <div>
<p> My name is {props.name} and my age is {props.age}</p>
<p> My name is {props.name} and my age is {props.age} and {props.children}</p>
<p>{props.children}</p>
        </div>
)
};

[ReactHooks] [useState] [ReactJs]

Answer 19

可能是你在没有条件的之前添加了依赖条件的useEffect

例如：

useEffect(() => {
  _anyFunction();
}, []);
    
useEffect(()=> {
  anyCode....
}, [response]);

Answer 20

如果您仍在寻找这个问题的答案，上述所有解决方案都可以正常工作，但我仍然会在下面提供运行/正确的代码（已编辑）

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

  const App = props => {
    const [personsState, setPersonsState ] = useState({
      persons:[
        {name: 'Ram', age: 20},
        {name: 'Rahul', age: 24},
        {name: 'Ramesh', age: 25}
      ],
      otherState: 'Some Other value' 
    });

    const switchNameHandler = () => {
      //console.log('Click is working');
      //Dont Do THIS: this.state.persons[0].name = 'singh';
      setPersonsState({
        persons:[
        {name: 'Ram',age: 20},
        {name: 'Raj', age: 24},
        {name: 'yts', age: 30} 
      ]
    });
    };

    return (
      <div className="App">
        <h1>Nice two one three  Hello i am a noob react developer</h1>
        <button onClick={switchNameHandler}>Switch Name</button>
        <Person name={personsState.persons[0].name} age={personsState.persons[0].age} />
        <Person name={personsState.persons[1].name} age={personsState.persons[1].age}> My hobbies are Gaming</Person>
        <Person name={personsState.persons[2].name} age={personsState.persons[2].age} />
      </div>
    ); 
    // return React.createElement('div',{className:'App'}, React.createElement('h1', null, 'Hi learning the basics of react'));
}

export default App;

Answer 21

我认为您上的课程与我相同，因为您在此使用了完全相同的变量名称，实际上您在这里遗漏了一点，即您将应用程序名称更改为小写

export default app

有个小错误就是在index.js里面也改了名字你在App.js这里改了名字但是在index.js里忘记改了你还是这样导入

import App from './App.js'

所以你也必须在那里更改名称

Answer 22

作为最佳实践，尝试在 Person 组件中使用 props 元素之前对其进行解构。也使用函数组件而不是 consts。（不那么混乱，你可以更快地完成事情）

function ({person}) {
  const name={person.name}
  return (
    <h2>{name}</h2>
  )
}

Answer 23

        import React, { useState } from "react"

    const inputTextValue = ({ initialValue }) => {
        const [value, setValue] = useState(initialValue);
        return {
            value,
            onChange: (e) => { setValue(e.target.value) }
        };
    };

    export default () => {
        const textValue = inputTextValue("");
        return (<>
            <input {...textValue} />
        </>
        );
    }

/*"Solution I Tired Changed Name of Funtion in Captial "*/

    import React, { useState } from "react"

const InputTextValue = ({ initialValue }) => {
    const [value, setValue] = useState(initialValue);
    return {
        value,
        onChange: (e) => { setValue(e.target.value) }
    };
};

export default () => {
    const textValue = InputTextValue("");
    return (<>
        <input {...textValue} />
    </>
    );
}

Answer 24

每当使用React功能组件时，请始终将组件名称的首字母保留为大写，以避免出现这些React Hooks错误。

在您的情况下，您已为组件app命名，如我上面所述，应将其更改为App，以避免React Hook错误。

Answer 25

步骤1：将文件名src / App.js更改为src / app.js

步骤2：单击“是”以“更新app.js的导入”。

第3步：再次重新启动服务器。

Answer 26

首先，您需要将组件的FirstLetter大写，在这种情况下， app 应该是 App ，而 person 应该是< strong>人员。

我试图复制您的代码，以期发现问题。由于您没有分享如何调用 App 组件，因此我只能看到一种导致问题的方法。

这是CodeSandbox中的链接：Invalid hook call。

为什么？由于下面的代码是错误的：

ReactDOM.render(App(), rootElement);

应该是：

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

有关更多信息，请阅读Rule of Hooks - React

希望这会有所帮助！

Answer 27

正如Yuki已经指出的，解决方案是将组件名称大写。请务必注意，不仅“大写” App组件需要大写，而且所有组件也需要大写：

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

export default Person;

这归因于eslint-plugin-react-hooks软件包，特别是RulesOfHooks.js脚本中的isComponentName()函数。

官方解释from Hooks FAQs：

我们提供了一个ESLint插件，该插件可以强制执行Hooks规则以避免错误。它假定任何以“ use”开头且紧随其后的是大写字母的函数都是“挂钩”。我们认识到这种启发式方法并不完美，并且可能会有一些误报，但是如果没有整个生态系统的约定，就无法使Hooks正常工作-较长的名称将使人们不愿采用Hooks或遵循约定。 / p>

Answer 28

解决方案很简单，正确的“ app”并用大写第一个字符写“ App”。

Answer 29

您收到此错误：“函数Happ中的“应用程序”中调用了反应挂钩“ useState”，它既不是React函数组件也不是自定义的React Hook函数”

解决方案：您基本上需要将函数大写。

例如：

const Helper =()=>{}

function Helper2(){}

Answer 30

在app函数中，您错误地拼写了单词setpersonSate，但缺少字母t，因此应为setpersonState。

错误：

const app = props => { 
    const [personState, setPersonSate] = useState({....

解决方案：

const app = props => { 
        const [personState, setPersonState] = useState({....

Answer 31

反应组件名称应大写，自定义挂钩函数应以 use 关键字开头，以标识为反应挂钩函数。

因此，将您的 app 组件大写为 App

Answer 32

我遇到了同样的问题，但应用程序却没有。我有一个自定义类，但使用小写字母开头的函数名称，也收到错误。

将函数名称的第一个字母和导出行更改为CamelCase，错误消失了。

在我看来，最终结果是这样的：

function Document() {
....
}
export default Document;

这解决了我的问题。

Answer 33

您输入的内容正确吗？

import React, { useState } from 'react';

Answer 34

请勿使用箭头功能创建功能组件。

请执行以下示例之一：

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

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

或

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

在函数“ app”中调用React Hook“ useState”，该函数既不是React函数组件也不是自定义的React Hook函数

34 个答案: