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

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

我有一个组件如下

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;

import React，{useState}来自“React”；
函数App（）{
const[count]=React.useState（0）；//在此处设置状态
函数计数\u复选框（）{
适用风险值=[]；
const cbs=document.querySelectorAll（'input[class*=“checkbox_value”]”）；
cbs.forEach（（cb）=>{
如果（cb.选中）{
适用的.push（parseInt（cb.value））；
}
});
this.setState（{count:applicative.length}）//此处更新状态
}
返回(
//在这里使用状态
);
}
导出默认应用程序；

---

但是国家在这里不起作用。

国家应该是这样的

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

hook返回一个由值和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
  }

您可以在下面的类似窗口中访问

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;

import React，{useState}来自“React”；
函数App（）{
const[count，setCount]=React.useState（0）；//在此处设置初始状态
函数计数\u复选框（）{
适用风险值=[]；
const cbs=document.querySelectorAll（'input[class*=“checkbox_value”]”）；
cbs.forEach（（cb）=>{
如果（cb.选中）{
适用的.push（parseInt（cb.value））；
}
});
setCount（applicative.length）//此处更新状态
}
返回(
//你不能在这里使用这个.state.count
);
}
导出默认应用程序；
const[count，setCount]=React.useState（0）您可以将初始值设置为0I不知道输入[submit]是否有值属性。我将其视为输入[text]。请像这样尝试<代码>设置计数（适用的.length，（）=>{alert（count）；}）
；请参考这个　你可以这样做。我编辑了我的答案，因为在评论中很难显示代码。谢谢@Priyank Kachhela。我试图使用以下代码
函数count_checkbox（）{var applicative=[]；const cbs=document.queryselectoral（'input[class=“checkbox_value”]”）；cbs.forEach（（cb）=>{if（cb.checked）{applicative.push（parseInt（cb.value））；}；setCount（applicative.length）alert（count）}
我得到的是以前的值而不是当前值。为什么？
setCount
是异步的，所以它不会立即反映在警报中，所以您需要使用useffect来检查正确的值。谢谢@Priyank Kachhela。如何使用
useffect
？我是React的新手。我已更新了我的答案，有关更多信息，请参阅此文档：谢谢@koralarts。我试图使用以下代码
函数count_checkbox（）{var applicative=[]；const cbs=document.queryselectoral（'input[class=“checkbox_value”]”）；cbs.forEach（（cb）=>{if（cb.checked）{applicative.push（parseInt（cb.value））；}；setCount（applicative.length）alert（count）}
我得到的是以前的值而不是当前值。为什么？谢谢@Thennarasu Ramasamy。我试图使用以下代码
函数count_checkbox（）{var applicative=[]；const cbs=document.queryselectoral（'input[class=“checkbox_value”]”）；cbs.forEach（（cb）=>{if（cb.checked）{applicative.push（parseInt（cb.value））；}；setCount（applicative.length）alert（count）}
我得到的是以前的值而不是当前值。为什么？