我在用事件更新 React 組件內的物件時遇到了麻煩。
const Comp = (props) => {
...
let tango = {alpha: null};
...
let handleFirst = () => {
tango.alpha = "CLICK";
console.log(tango);
}
let handleSecond = () => {
console.log(tango);
}
return (
<div id="first" onClick={handleFirst}>text</div>
<div id="second" onClick={handleSecond}>image</div>
)
}
當我單擊 div 時，first我收到以下控制臺輸出：{alpha: "CLICK"}，但是當我單擊 div 時，second我收到控制臺輸出，因為它為 null：{alpha: null}。我不想包含tango到useState函式中，因為我想在另一個觸發器之后更新組件的狀態，所以我不需要在每次編輯物件后渲染組件。
在我看來，這非常令人沮喪，但我不知道該怎么做，我幾乎嘗試了所有方法，在我看來，添加alpha到 state 將是解決方案，但我希望我可以避免它。
uj5u.com熱心網友回復：
聽起來在第一次點擊第二次之間有一些重新渲染 - 如果沒有，被呼叫的tango關閉將handleFirst與被呼叫關閉的相同handleSecond：
const Comp = (props) => {
let tango = {alpha: null};
let handleFirst = () => {
tango.alpha = "CLICK";
console.log(tango);
}
let handleSecond = () => {
console.log(tango);
}
return (<div>
<div id="first" onClick={handleFirst}>text</div>
<div id="second" onClick={handleSecond}>image</div>
</div>)
}
ReactDOM.render(<Comp />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>如果您想保持對tango跨重新渲染的持久參考，而不對其進行更改導致重新渲染本身，則可以使用 ref 代替：
const Comp = (props) => {
let tangoRef = React.useRef({alpha: null});
const [someState, setSomeState] = React.useState(0);
let handleFirst = () => {
tangoRef.current.alpha = "CLICK";
setSomeState(someState 1);
console.log(tangoRef.current);
}
let handleSecond = () => {
console.log(tangoRef.current);
}
return (<div>
<div id="first" onClick={handleFirst}>text</div>
<div id="second" onClick={handleSecond}>image</div>
</div>)
}
ReactDOM.render(<Comp />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/339329.html
標籤：javascript 反应
下一篇：單擊2次時背景顏色更改