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

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; 

当前回答

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

步骤2: 点击“是”选择“更新app.js的导入”。

步骤3: 重新启动服务器。

其他回答

React组件名称应大写,自定义钩子函数应以use关键字开始,以标识为React钩子函数。

把你的app组件大写为app

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

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

用户定义的组件必须大写。在你的例子中,你使用了const app = props =>{}。在“app”中,“a”是小写的,你必须尝试使用“app”

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file. React recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

更多详情请查阅官方文件 点击这里

在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

我也有同样的问题。事实证明,把“App”中的“A”大写才是问题所在。 另外,如果你要导出:导出默认App;确保你导出了相同的名字“App”。