不使用类组件，仅在React中使用函数
不使用类组件，仅在React中使用函数
提问于 2021-10-13 14:03:42
你好，我正在学习react，我正在看教程，但是在安装的版本中，react不再使用类，它只显示函数，如果可能的话，我想继续这样做，但我有一个问题，在哪里更改名称与点击这一部分，但它不允许我访问人员(Const)，我怎么做呢？
import Person from './Person/Person'
function App() {
const persons = {
persons: [
{ name: 'Jose', age: 32},
{ name: 'Gabriel', age: 2}
]
}
const switchNameHandler = () => {
persons({
persons: [
{ name: 'Jose Fernando', age: 32},
{ name: 'Gabriel', age: 2}
]
})
}
return (
<div className="App">
<h1>Hi, I'm a React App!</h1>
<button onClick={switchNameHandler}> Switch Name</button>
<Person name={persons.persons[0].name} age={persons.persons[0].age}/>
<Person name={persons.persons[1].name} age={persons.persons[1].age}> I like play</Person>
</div>
);
}
export default App;我如何修复switchNameHandler部件？
我知道如果我使用类，我可以访问this.setPersons，但是有什么方法可以不使用类来访问吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-13 14:22:12
您需要使用useState挂钩。所有钩子都在非结构化数组中返回两项内容(1)状态值和(2)设置该状态值的函数。您放在useState()函数中的值就是初始值。
例如：
const [name, setName] = useState("Ben");这里，name的初始值是"Ben"。如果我想要更改这个值，我可以使用setName函数并执行类似setName("Jerry");的操作。现在name的值是"Jerry"。
setter (在本例中为setName)和this.setState (在类组件中)之间最大的区别在于，如果您没有显式定义前一个状态，this.setState会自动记住并传播它。有了钩子，你必须自己去做：
例如：
const [person, setPerson] = useState({ name: "", id: "", age: "" });如果我有这个状态，并且只想编辑人名，我必须记住在每次更新状态时，通过使用回调函数来扩展前一个状态对象-其中回调中的参数是前一个状态：
// just updating name
setPerson(prevPerson => ({ ...prevPerson, name: "Bob" }));在这里，唯一变化的是"name“值，而其他所有东西都保持不变：
结果：{ name: "Bob", id: "", age: ""}
有关更多提示和示例，请查看react文档：https://reactjs.org/docs/hooks-state.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69556970
复制相关文章
相似问题
腾讯云开发者
