我需要檢測是否handleSelectProduct在另一個組件中被呼叫。我的問題是，如果我希望子組件（ProductDetailsComponent）重新渲染，它仍然會輸出console.log('HELO'). 我只想輸出console.log('HELO')IFhandleSelectProduct僅被點擊。
const ProductComponent = () => {
const [triggered, setTriggered] = React.useState(0);
const handleSelectProduct = (event) => {
setTriggered(c => c 1);
};
return (
<div>
Parent
<button type="button" onClick={handleSelectProduct}>
Trigger?
</button>
<ProductDetailsComponent triggered={triggered} />
</div>
);
};
const ProductDetailsComponent = ({ triggered }) => {
React.useEffect(() => {
if (triggered) {
console.log('HELO');
}
}, [triggered]);
return <div>Child</div>;
};
ReactDOM.render(
<ProductComponent />,
document.getElementById("root")
);
uj5u.com熱心網友回復：
對我來說，最簡單的解決方案是使用 anuseRef來保留舊值，因此console.log僅在觸發值發生變化時才考慮。
const ProductDetailsComponent = ({ triggered }) => {
const oldTriggerRef = React.useRef(0);
React.useEffect(() => {
if (triggered !== oldTriggerRef.current) {
oldTriggerRef.current = triggered;
console.log('HELO');
}
}, [triggered]);
return <div>Child</div>;
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/403141.html
標籤：
上一篇：在onClick3中按下onClick2時，如何獲取輸入更改的值？
下一篇：無法從json檔案中獲取資料