React：如何在函数组件中使用 setState？

Question

我正在学习React。我读了一篇文章，建议我们使用函数组件而不是继承React.Component的类，所以我遵循了这个建议。我还使用箭头函数代替function关键字。具体如下：

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

我有一个包含20个属性的结构体，例如：

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

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

是否有一种方法可以使用setState()而不是setName()，setId()等等？或者有什么建议吗？

非常感谢！

- Antony

---

https://reactjs.org/docs/hooks-state.html - jonrsharpe

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,merge%20between%20the%20new%20and%20the%20previous%20state

（使用React v16.8新增的“hooks”可以更方便地修改状态，有关详细信息请参见上述链接。）

- DennisVM-D2i

---

我得到了这样的错误信息：无法读取未定义对象的“setState”属性。起初，我以为是因为我使用了箭头函数，然后我尝试改用 function 关键字，但错误仍然存在。我正在努力将其改为继承 React.Component 的类，希望能够解决这个问题。谢谢。 - Antony

我从你说的地方开始 - 从一个基于“class”的组件开始。如果您坚持切换到基于“function”的组件，则略有不同，总结如下：` import React, { useState } from 'react';...// 'useState'钩子（函数）返回用于状态值的getter（变量）和setter（函数） - 并使用初始/默认值进行设置，例如 const [ firstName, setFirstName ] = useState(''); `然后您可以使用getter变量来读取它，使用setter函数来设置它： setFirstName('Dennis'); - DennisVM-D2i

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>

- Siva K V

Answer 3

this.setState仅适用于基于类的组件。在功能组件中，使用useState钩子，它的行为类似于state。

useState允许您向函数组件添加React状态。

- Faizan Ahmed

Answer 4

基于类的组件和基于函数的组件都有不同的方式来存储和设置值。

在基于类的组件中，通常使用this.state，它通常是一个对象，并保存组件中所需的所有值，在这里使用setState()函数对此状态对象进行浅层更新（它将合并前一个和新的对象）。

在基于函数的组件中，可以使用useState钩子存储状态。状态变量的名称可以是任何内容。就像类组件一样，我们通过useState钩子返回两个项目。第一个项目表示变量，第二个项目表示setter函数。

现在，

要声明useState变量，如下所示：

const [banana, setBanana] = useState("initial value - could be string, number, object");

在组件中使用变量时，只需使用变量名 "banana" 并使用 setter 函数设置变量的新值，例如：

setBanana("good banana");

这将把初始值更改为您设置的任何值。如果变量是一个对象，它将被替换为新对象而不是浅合并。

此外，在基于函数的组件内，您可以拥有任意数量的useState变量。需要记住的重要事情是，如果在函数调用中调用了多个变量，则会执行批处理。

参考：

1. https://react.dev/reference/react/Component#setstate
2. https://legacy.reactjs.org/docs/hooks-state.html#declaring-a-state-variable

- Mayank Singh