React函数式组件中State的使用

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;

但是 State 在这里不起作用。

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

更新功能组件中的状态不同于 class 组件。 useState hook returns 由值和 setter.

组成的数组

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

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

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

Answer 3

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

useState returns 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 作为参数，returns 是一个 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;

React函数式组件中State的使用

Usage of State in functional component of React

reactjs

react-state

react-functional-component