React Hook " usestatequot;在函数中被称为“应用”;它既不是React函数组件，也不是自定义React钩子函数

你的导入正确吗?

import React, { useState } from 'react';

然而，对我来说，这是悲伤的。

试着把“app”大写

const App = props => {...}


export default App;

在React中，组件需要大写，自定义钩子需要以use开头。

我有同样的问题，但不是与应用程序。我有一个自定义类，但使用小写字母开始函数名，也收到了错误。

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

在我的案例中，最终结果是这样的:

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

这解决了我的问题。

我觉得我们在Udemy上的课程是一样的。

如果是，则大写

const app

来

const App

做得和做得一样好吗

export default app

来

export default App

这对我来说很有效。

组件应以大写字母开头。还记得将行中的第一个字母改为export!

你得到这个错误:"React Hook "useState"在函数"App"中被调用，这既不是一个React函数组件，也不是一个自定义的React Hook函数"

解决方案:你基本上需要大写函数。

例如:

const Helper =()=>{}


function Helper2(){}

解决方法很简单，把“app”写正确，并把“app”的第一个字母大写。

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

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


export default Person;

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

官方解释来自Hooks faq:

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

首先，你需要大写你的组件的FirstLetter，在你的情况下应用程序应该是应用程序和人应该是人。

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

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

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

ReactDOM.render(App(), rootElement);

它应该是:

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

有关更多信息，您应该阅读钩子规则-反应

希望这能有所帮助!

在函数名中使用首字母大写。

function App(){}

React组件的名称应该是大写，自定义钩子函数应该以使用关键字开始，以标识为React钩子函数。

因此，将你的应用程序组件大写为应用程序

将app大写为app肯定会起作用。

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

只要试着将你的应用程序名称大写即可

const App = props => {...}


export default App;

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

按照下面的例子做:

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

函数的第一个字符应该是大写的

使用const App而不是const App

无论何时使用React功能组件，始终保持组件名称的首字母为大写，以避免这些React Hooks错误。

在你的例子中，你已经将组件命名为app，应该改为App，就像我上面说的，以避免React Hook错误。

替换这个

export default app;

用这个

export default App;

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

在应用程序函数中，你错误地拼写了单词setpersonSate，缺少了字母t，因此它应该是setpersonState。

错误:

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

解决方案:

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

使用大写字母定义功能组件名称/ 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]

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

export default function App() { }

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;

React组件(包括函数组件和类组件)必须以大写字母开头。就像

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不能首先将其标识为用户定义的组件。

useState也可以在自定义钩子中使用，用于可重用性和逻辑抽象。所以根据钩子的规则，自定义钩子的名称必须以&;use&;开头。前缀，必须在驼峰箱

如果你仍然在寻找这个问题的答案，以上所有的解决方案都很好，但我仍然会提供以下运行/正确的代码(编辑)

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;

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

例:

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

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

我想你们学的课程和我学的是一样的因为你们在这里使用了完全相同的变量名，实际上你们遗漏了一点就是你把应用的名字改成了小写

export default app

有一个小错误，就是在index.js中更改名称，你在App.js中更改了名称，但在index.js中忘记更改名称，你仍然像这样导入它

import App from './App.js'

所以这里的名字也要改

你的代码

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, {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;

会有用的谢谢。

就像最佳实践一样，在Person组件中使用props元素之前，尝试解构它。也要使用函数组件而不是常量。(这样更容易混淆，你可以更快地完成任务)

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

尝试将“app”名称更改为“app”

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

函数名必须以大写字母开头

为例:

const App = props => {


}

不是const应用程序

用户定义的组件必须大写。在你的例子中，你使用了const app = props => { }。在“&;app"”中，“a”是小写，您必须尝试使用“应用程序”

1. 当一个元素类型以小写字母开头时，它引用一个内置组件，如<div>或<span>，并导致字符串'div'或'跨度'传递给React.createElement。以大写字母开头的类型，如<Foo />，编译为React.createElement(Foo)，并对应于在JavaScript文件中定义或导入的组件。
2. 反应建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在JSX中使用它之前将其赋值给一个大写的变量。

欲了解更多细节，请查看官方文件 点击这里 < / p >