反应钩子使用状态及时更新

Question

如何及时更新数字状态并观察更新console.log(number)值？

const [number,setNumber] = useState(0);
const minus = () => {
setNumber(number-1);
console.log(number);
}
return (
<>
<div>{number}</div>
<button onClick={minus}>-</button>
</>
)

Answer 1

您要做的是一个副作用：在控制台上打印一些内容。

这就是useEffect钩子的用途 - 它可以让您执行副作用。

所以这里有一个可能的实现：

function App() {
const [number, setNumber] = useState(0);
const minus = () => {
setNumber(number - 1);
};
useEffect(() => {
console.log(number);
}, [number]);
return (
<>
<div>{number}</div>
<button onClick={minus}>-</button>
</>
);
}

当然，如果您只是使用console.log进行调试，这可能是一个矫枉过正的解决方案。如果是这样的话，@zynkn和@deepak-k的答案就好用了。

Answer 2

试试这个

setNumber((number)=> {number-1 ; console.log(number)});

Answer 3

const [number,setNumber] = useState(0);
const minus = () => {
// setNumber(number-1);  
// It is also work well but it is working with async. 
// So you can't see the below console.log().
// console.log(number);
setNumber((prevNumber) => {
newNumber = prevNumber - 1;
console.log(newNumber);
return newNumber;
});
}
return (
<>
<div>{number}</div>
<button onClick={minus}>-</button>
</>

)