我的應用程式中有一堆按鈕，單擊它們時更改它們的 className（“myButton”或“activeMyButton”）。每當我點擊一個非活動按鈕時，它都不會重新渲染。但是當我點擊一個活動按鈕時，它會重新渲染（如果我之前點擊了非活動按鈕，它們會用這個按鈕重新渲染）。這對我來說沒有任何意義。這是我的代碼：按鈕組件
export default function MyButton({
buttonFunction,
buttonParameter,
activeButton,
}) {
return (
<button
className={activeButton ? "myButton activeMyButton" : "myButton"}
onClick={() => {
buttonFunction(buttonParameter);
}}
>
{buttonParameter}
</button>
);
}
這是父組件：
export default function Mathoperators() {
const [activeOperators, setActiveOperators] = useState([" "]);
const handlingOperators = (operatorInput) => {
let stockOperators = activeOperators;
if (
stockOperators.length > 0 &&
stockOperators.some((operator) => {
return operator === operatorInput;
})
) {
stockOperators = stockOperators.filter((operator) => {
return operator !== operatorInput;
});
setActiveOperators(stockOperators);
} else {
stockOperators.push(operatorInput);
setActiveOperators(stockOperators);
}
};
const handlingOperatorButtonClass = (operatorInput) => {
return activeOperators.some((operator) => {
return operator === operatorInput;
});
};
return (
<section className="optionsContainer">
<MyButton
buttonParameter={!mathPlus}
buttonFunction={setMathPlus}
activeButton={mathPlus}
/>
<MyButton
buttonParameter="?"
buttonFunction={handlingOperators}
activeButton={handlingOperatorButtonClass("?")}
/>
<MyButton
buttonParameter="×"
buttonFunction={handlingOperators}
activeButton={handlingOperatorButtonClass("×")}
/>
<MyButton
buttonParameter="÷"
buttonFunction={handlingOperators}
activeButton={handlingOperatorButtonClass("÷")}
/>
</section>
);
}
如果我從這個陣列狀態切換到四個布爾狀態，一切正常。但我想知道這個版本是否有問題。謝謝 ！
uj5u.com熱心網友回復：
當您撰寫代碼時，let stockOperators = activeOperators您不是在創建新陣列，而是在創建一個指向activeOperators狀態的變數。因此，stockOperators.push(operatorInput)實際上直接改變了您的狀態，并創建了您所看到的這種奇怪的行為。
let stockOperators = [...activeOperators] 應該修復它！
uj5u.com熱心網友回復：
將其更改為 let stockOperators = [...activeOperators];
這是因為當你這樣做時 let stockOperators = activeOperators;
它將復制對該值的參考并更改它意味著您更改了開始本身，因此當您將其放入 setState 時，它??看起來從未被更改過
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/358975.html
標籤：javascript 反应
上一篇：當彈出視窗打開時隱藏導航欄