我试图使用反应钩子来解决一个简单的问题
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;
不要使用箭头函数创建功能组件。
按照下面的例子做:
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 })}
/>
);
});
如果你仍然在寻找这个问题的答案，以上所有的解决方案都很好，但我仍然会提供以下运行/正确的代码(编辑)
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;
