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

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

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;

当前回答

试着把“app”大写

const App = props => {...}

export default App;

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

2019-04-26 07:32:13

其他回答

在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

2020-01-17 10:11:56

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”前缀开头，并且必须在驼峰大小写中

2020-08-07 12:39:19

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

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

例如:

const Helper =()=>{} 函数Helper2 () {}

2019-07-25 15:28:10

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

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

2021-07-18 10:54:02

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

[反应物][useState][反应物]

2020-06-08 08:39:06

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

推荐文章

最新文章

标签