问题描述
如何在 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;