我有一個簡單的按鈕，它訂閱和取消訂閱 onPress()
<Button
onPress={() => setRunning(running => !running)}
title={running ? 'Stop' : 'Start'}
/>
但是當我初始化我的狀態時，它會運行 useState 函式，這是致命的，因為我也無法取消訂閱我還沒有訂閱的東西。
const [running, setRunning] = useState(false);
useState(() => {
if (running) {
subscription.subscribe(...)
} else {
subscription.unsubscribe();
}
});
除非我按下按鈕，否則如何避免 useState 運行？
uj5u.com熱心網友回復：
您看到函式 get run 的原因是，它接受初始狀態，如果這是一個函式，它會運行該函式以獲取初始狀態（僅在掛載時）。useState
您不使用useState訂閱事物之類的（副作用）效果，這根本不是它的用途。對于（副作用）效果，通常您使用useEffect：
useEffect(() => {
if (running) {
subscription.subscribe(/*...*/)
return () => {
subscription.unsubscribe();
};
}
}, [running]);
這樣做：
- 任何時候
running發生變化，它都會運行你傳遞給它的函式。 - 如果
running此時為 true，它會訂閱該事物并回傳一個清除函式，該函式將取消訂閱該事物。 - 下次
running更改，或者當組件卸載時，呼叫清理回呼，執行取消訂閱。
顯示代碼片段
const { useState, useEffect } = React;
const subscription = {
subscribe() {
console.log("subscribed");
},
unsubscribe() {
console.log("unsubscribe");
}
};
const Example = () => {
const [running, setRunning] = useState(false);
useEffect(() => {
if (running) {
subscription.subscribe(/*...*/)
return () => {
subscription.unsubscribe();
};
}
}, [running]);
return <input type="button" value={running ? "stop" : "run"} onClick={() => setRunning(r => !r)} />;
};
const App = () => {
const [showExample, setShowExample] = useState(true);
return <div>
{showExample ? <Example /> : <em>(example hidden)</em>}
<div>
<label>
<input
type="button"
value="show/hide example"
onClick={() => setShowExample(e => !e)}
/>
</label>
</div>
</div>;
};
ReactDOM.render(<App />, document.getElementById("root"));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>另一種選擇是在按鈕單擊處理程式中訂閱/取消訂閱，但您仍然需要useEffect清理回呼以確保您在卸載時取消訂閱。（這可能很棘手，因為您無法使用該running標志來確定是否執行此操作，因為清理功能將關閉它的過時副本。為此，您可能需要一個參考。）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/428808.html
上一篇：為什么我得到失敗的道具型別：提供給“LottieView”的“object”型別的無效道具“onAnimationFinish”，需要一個“功能”
下一篇：如何使用redux調度和重用影像