基本上React.useState(0)神奇地看到它应该返回元组计数和setCount(一个改变计数的方法)。参数useState用于设置count的初始值。

  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(0);

  // increments count by 1 when first button clicked
  function handleClick(){
    setCount(count + 1);
  } 

  // increments count2 by 1 when second button clicked
  function handleClick2(){
    setCount2(count2 + 1);
  } 

  return (
    <div>
      <h2>A React counter made with the useState Hook!</h2>
      <p>You clicked {count} times</p>
      <p>You clicked {count2} times</p>
      <button onClick={handleClick}>
        Click me
      </button> 
      <button onClick={handleClick2}>
        Click me2
      </button>
  );

基于Enmanuel Duran的示例，但显示了两个计数器，并将lambda函数作为普通函数编写，因此有些人可能更容易理解。

谢谢loelsonk，我做到了

const [dataAction, setDataAction] = useState({name: '', description: ''}); const _handleChangeName = (data) => { if(data.name) setDataAction( prevState => ({ ...prevState, name : data.name })); if(data.description) setDataAction( prevState => ({ ...prevState, description : data.description })); }; ....return ( <input onChange={(event) => _handleChangeName({name: event.target.value})}/> <input onChange={(event) => _handleChangeName({description: event.target.value})}/> )

React useState是React钩子，允许你在功能组件中管理状态。

例如:

import React, { useState } from 'react'

const Example = () => {
  // create the "counter" state
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Button clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Count + 1
      </button>
    </div>
  )
}

export default Example

使用useState，您可以轻松地创建有状态的功能组件。 旧的等效方法，使用Component类和setState类组件是:

import React, { Component } from 'react'

class Example extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  render() {
    const { count } = this.state
    return (
      <div>
        <p>Button clicked {count} times</p>
        <button onClick={() => this.setState({ count: count + 1 })}>
          Count + 1
        </button>
      </div>
    )
  }
}

export default Example

来源:

React useState Hook:什么是新的和使用它

链接:

React Hooks文档

useState是React v16.8.0可用的钩子之一。它基本上允许您将非状态/功能组件转换为可以拥有自己状态的组件。

在最基本的层面上，它是这样使用的:

const [isLoading, setLoading] = useState(true);

这允许您调用setLoading传递一个布尔值。 这是拥有“有状态”功能组件的一种很酷的方式。

上面提供的答案很好，但让我插一句，useState是异步的，所以如果你的下一个状态依赖于你的前一个状态，你最好给useState一个回调。请看下面的例子:

import { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      // passing a callback to useState to update count
      <button onClick={() => setCount(count => count + 1)}>
        Click me
      </button>
    </div>
  );
}

如果您的新状态依赖于旧状态的计算，这是推荐的方法。

useState钩子的语法很简单。

const [value, setValue] = useState(defaultValue)

如果您不熟悉这个语法，请到这里。

我建议您阅读文档。有很好的解释和大量的例子。

import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // its up to you how you do it const buttonClickHandler = e => { // increment // setCount(count + 1) // decrement // setCount(count -1) // anything // setCount(0) } return ( <div> <p>You clicked {count} times</p> <button onClick={buttonClickHandler}> Click me </button> </div> ); }