我正在学习 React。我读了一篇文章，建议我们使用函数式组件而不是扩展 React.Component 的类，所以我遵循了。我也使用箭头函数而不是 function 关键字。那是：
const MyComponent = (props) => {...}
我得到了一个具有 20 个属性的结构，例如：
{
id: '',
firstname: '',
lastname: '',
...
}
我正在使用 if ... else if ... 来设置状态，但我看到一些示例仅在一行代码中使用 this.setState()。我尝试从“react”导入 setState，但失败了。
有没有办法使用 setState() 而不是 setName()、setId()、...等？或者有什么建议？
非常感谢你！
只有（一个）'setState()' 方法 - 不是每个属性的方法（如您所建议/质疑的那样）。
就其参数而言，它是一个组合，因为您可以在同一个/一个调用中指定/设置多个项目（到“setState()”方法），因此您可以一次性设置所有 20 个项目.
例如
this.setState({ "firstName" : firstNameVal, "lastName" : lastNameVal });
我是从你说你开始的地方开始的——从一个基于“类”的组件开始。
如果您坚持切换到基于“函数”的组件，那么它会略有不同，总而言之：
import React, { useState } from 'react';
...
// The 'useState' hook (function) returns a getter (variable) & setter (function) for your state value - and takes the initial/default value for it/to set it to, e.g.
const [ firstName, setFirstName ] = useState('');
然后您使用 getter var 读取它并使用 setter 函数来设置它：
setFirstName('Dennis');
（我可能是错的，但我相信在 React 的 v16.8 中添加了“钩子”。）
更深入的描述：
useState在功能组件中使用钩子。
const App = () => {
const [state, setState] = React.useState({ first: "hello", second: "world" });
return (
<div>
<input type="text" value={state.first} onChange={(ev) => setState({...state, first: ev.target.value})} />
<input type="text" value={state.second} onChange={(ev) => setState({...state, second: ev.target.value})} />
</div>
)
}
ReactDOM.render(<App />, document.getElementById('app'))<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="app"> </div>this.setState 仅适用于基于类的组件。在功能组件中使用useState钩子，它表现为一个状态
useState 允许您将 React 状态添加到函数组件。