在 React 的功能组件中使用状态

Question

如何在 React 的功能组件中使用 State？

我有一个像下面这样的组件

import React, { useState } from 'react';

function App() {
  const [count] = React.useState(0);    //Set State here

  function count_checkbox() {
    var applicable = [];
    const cbs = document.querySelectorAll('input[class*="checkbox_value"]');
    cbs.forEach((cb) => {
      if (cb.checked) {
        applicable.push(parseInt(cb.value));
      }
    });
    this.setState({ count: applicable.length })  //Update State here
  }

  return (
    <div className="App">
        <input type="submit" id="button" value="{ this.state.count }"/>   //Use State here
    </div>
  );
}

export default App;

但状态在这里不起作用。

Answer 1

状态应该是这样的

const [count,setCount] = React.useState(0); //setState

function count_checkbox() {
    var applicable = [];
    const cbs = document.querySelectorAll('input[class*="checkbox_value"]');
    cbs.forEach((cb) => {
      if (cb.checked) {
        applicable.push(parseInt(cb.value));
      }
    });
    setCount(applicable.length)  //Update State here
  }

setCount 设置状态计数。

Answer 2

在功能组件中更新状态与类组件不同。 useState 钩子返回一个由值和一个 setter 组成的数组。

然后调用 setter 函数来更新状态的值。

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

function count_checkbox() {
  ...
  setCount(applicable.length)
}

Answer 3

this.setState 未用于更新类组件中的状态。为了更新功能组件中的状态，您需要使用适当的功能对其进行更新。

useState 返回 2 个值，第一个是当前状态值，第二个是更新该状态的函数

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

每当您想更新count 状态时，您都需要使用setCount 函数进行更新

  function count_checkbox() {
    ...
    setCount(applicable.length); //Update State here
  }

您可以在useEffect 中访问count，如下所示：-

useEffect(() => {
  alert(count);
}, [count])

Answer 4

函数式组件只是一个普通的 javascript 函数，它以 props 作为参数并返回一个反应元素。 无状态组件没有状态，这意味着您无法访问其中的this.state 和this.setState()。它也没有生命周期，所以你不能使用 componentDidMount 和其他钩子。

import React, { useState } from 'react';

function App() {
  const [count, setCount] = React.useState(0);    //Set initial state here

  function count_checkbox() {
    var applicable = [];
    const cbs = document.querySelectorAll('input[class*="checkbox_value"]');
    cbs.forEach((cb) => {
      if (cb.checked) {
        applicable.push(parseInt(cb.value));
      }
    });
    setCount(applicable.length) //Update State here
  }

  return (
    <div className="App">
      <input type="submit" value={`Apply tax to  ${ count }  item(s)`} />   //You Can't use this.state.count here
    </div>
  );
}

export default App;