在 React 的功能组件中使用 State

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

如何在 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;

但是 State 没有在这里工作。

解决方法

状态应该是这样的

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 设置状态计数。

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

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

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

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

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])

函数式组件只是一个普通的 javascript 函数，它接受 props 作为参数并返回一个 react 元素。无状态组件没有状态，这意味着您无法访问其中的 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;