我有一個非常基本的例子，我無法弄清楚我做錯了什么。我有一個非常簡單的計數器，我想將其初始狀態復制到另一個沒有反應性的變數，但不能這樣做。
import { useState } from "react";
import "./styles.css";
export default function App() {
const [number, setNumber] = useState({ val: 10 });
const numberAssign = Object.assign({}, number);
const numberJSON = { ...number };
const numberSpread = JSON.parse(JSON.stringify(number));
const clicked = () => {
setNumber({ val: number.val 1 });
};
return (
<div className="App">
<button onClick={clicked}>Inc</button>
<p>{number.val}</p>
<p>{numberAssign.val}</p>
<p>{numberJSON.val}</p>
<p>{numberSpread.val}</p>
</div>
);
}
單擊按鈕時，所有變數都會增加，但我只希望number變數增加。
uj5u.com熱心網友回復：
變數沒有例外行為。您正在將變數設定為狀態變數的值，在這種情況下，該值不斷更新。嘗試在狀態之外宣告 val 變數
`const val = 10;
const [number, setNumber] = useState({ val });`
然后使用 val 而不是數字狀態。
uj5u.com熱心網友回復：
我不知道這是否會對您有很大幫助，但是您可以使用另一個 useState 鉤子來存盤當前狀態的 prev 值。代碼：
import { useState } from "react";
export default function App() {
const [currNum, setCurrNum] = useState(10);
const [prevNum, setPrevNum] = useState(0);
const clicked = () => {
setPrevNum(prevNum);
setCurrNum(prevNum =1);
};
return (
<div className="App">
<button onClick={clicked}>Inc</button>
<p>{currNum}</p>
<p>{prevNum}</p>
</div>
);
}
uj5u.com熱心網友回復：
我不確定我是否理解您問題的全部范圍，但我認為您正在尋找useRef鉤子
https://reactjs.org/docs/hooks-reference.html#useref
在您的代碼中，它會像這樣作業：
import { useState, useRef } from "react";
import "./styles.css";
export default function App() {
const currNumber = useRef({ val: 10 });
const [number, setNumber] = useState(currNumber.current);
const clicked = () => {
setNumber({ val: number.val 1 });
};
return (
<div className="App">
<button onClick={clicked}>Inc</button>
<p>{number.val}</p>
<p>{numberAssign.val}</p>
<p>{numberJSON.val}</p>
<p>{numberSpread.val}</p>
</div>
);
}
這樣，currentNumber.current將始終保持 10，除非您更改它...
uj5u.com熱心網友回復：
在每個 setState(useState) 操作上，組件將重新渲染其中的所有內容。它只會保留使用諸如 useState 之類的 React 鉤子創建的值（這就是 useState 想要做的）
console.log('rerender')在所有 useStates 之前放置一個，你會看到它會在它的動作上觸發，這意味著在功能組件中它不會保留任何變數或值，除非它是使用 react hooks 創建的，即使它是 const 變數
在你的情況下，這個 const 變數被再次創建，并為其分配了新的數字物件，這就是它每次都會更新的原因。但是你可以在不同的 useStates 中使用它，或者你可以在 useEffect 中定義它，它只會在特定時間觸發呼叫 import { useState } from "react";
export default function App() {
console.log('rerender')
const [number, setNumber] = useState({ val: 10 });
const [numberAssign, setN] = useState(Object.assign({}, number));
const [numberJSON, setJSON] = useState({ ...number });
const [numberSpread,setSpread] = useState(JSON.parse(JSON.stringify(number)));
const clicked = () => {
setNumber({ val: number.val 1 });
};
return (
<div className="App">
<button onClick={clicked}>Inc</button>
<p>{number.val}</p>
<p>{numberAssign.val}</p>
<p>{numberJSON.val}</p>
<p>{numberSpread.val}</p>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339824.html
標籤：javascript 反应 打字稿 使用状态