我是 React 學習者，我想了解一些東西。下面的代碼不起作用，它只是一個帶有兩個按鈕的組件，用于添加或減去一個數字并顯示它。這是整個代碼：
import React from "react";
import { useState } from "react";
const Compteur = () => {
let i = 0;
const [number, setNumber] = useState(0);
const increment = () => {
i ;
setNumber(i);
};
const decrement = () => {
i--;
setNumber(i);
};
return (
<div>
<button type="button" onClick={increment}>
</button>
<button type="button" onClick={decrement}>
-
</button>
<p>Number : {number}</p>
</div>
);
};
export default Compteur;
但是如果我用 setNumber(number 1) 替換 setNumber(i)，它運行良好。這個 i 變數有什么問題？謝謝你的幫助 ！
uj5u.com熱心網友回復：
歡迎來到反應！
您示例中的問題是，每次組件重新渲染（在您的情況下是由于狀態更改）時，i都會重新初始化并分配0. 我認為您更多地將組件視為一個回圈，而不是一個 javascript 檔案。React 在維護狀態方面做得很好，并且盡管重新渲染組件，該狀態將保持不變，這就是為什么當您使用number（一段 React 狀態）而不是它時它按預期作業的原因i
uj5u.com熱心網友回復：
因此，您的問題是設定let i = 0;為在每次重新渲染時重新運行反應代碼，這是由狀態更改（以及其他方式）引起的。
因此，當您呼叫setNumberreact 然后說“好的，重新渲染頁面”，它會沿著您的代碼向下移動，并看到“將 i 設定為 0”，然后當您增加代碼時，它會說“i ”或在這種情況下為“0” 1"（因為 i 再次設定為 0）。
本質上，每次 react 重新渲染組件時，它都會重置變數中的值。這就是我們必須使用的useState原因，因為 react 能夠跟蹤這些值。
你的例子setNumber(number 1)是你應該如何寫這個。
uj5u.com熱心網友回復：
您正在使用i每次渲染都會重新初始化的變數，您的代碼應該是這樣的
const increment = () => {
setNumber(number 1);
}
const decrement = () => {
setNumber(number - 1);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/355563.html
標籤：javascript 反应 使用状态