React：如何在功能组件内使用setState？

Question

我正在学习 React。我读到一篇文章建议我们使用函数式组件而不是扩展 React.Component 的类，所以我遵循了。我还使用箭头函数而不是 function 关键字。那是：

const MyComponent = (props) => {...}

我得到了一个具有 20 个属性的结构，例如：

{
    id: '',
    firstname: '',
    lastname: '', 
    ...
}

我正在使用 if ... else if ... 来设置状态，但我看到一些示例仅在一行代码中使用 this.setState() 。我尝试从“react”导入 setState，但失败了。

有没有办法使用 setState() 代替 setName()、setId() 等？或者有什么建议吗？

非常感谢！

Answer 1

只有（一个）“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');

（我可能是错的，但我相信“hooks”是在 React v16.8 中添加的。）

更深入的描述：

https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-state#:~:text=1%20A%20state%20can%20be%20modified%20based%20on，在%20the%20new%20和之间合并%20 %20%20前%20状态

Answer 2

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>