React Native hooks - 正确使用 useEffect()?

Question

我是钩子的新手，在 SO 上遇到了这个设置，想确认这是正确的模式。我之前收到RN"卸载组件"泄漏警告消息，这似乎解决了它。我试图以某种方式模仿compnentDidMount.这是电话号码验证注册流程和onMount的一部分，我只想检查navigation然后触发副作用，设置挂载true然后正确卸载。

const SMSVerifyEnterPinScreen = ({ route, navigation }) => {
const [didMount, setDidMount] = useState(false)
const { phoneNumber } = route.params
useEffect(() => {
if(navigation) {
signInWithPhoneNumber(phoneNumber)
setDidMount(true)
}
return () => setDidMount(false)
}, [])
if (!didMount) { return null }
async function signInWithPhoneNumber(phoneNumber) {
const confirmation = await auth().signInWithPhoneNumber('+1'+phoneNumber)
...
}
return (
...
)
}

RN 0.62.2 与反应导航 5 - 谢谢！

Answer 1

由于 signInWithPhoneNumber 是一个异步函数，并且会设置状态，您将看到警告它，在响应可用之前组件已卸载

为了处理这种情况，您可以保留一个变量以跟踪其是否挂载，然后仅设置状态是挂载的变量是否为 true

但是，如果组件已卸载，则无需返回 null，因为这不会完成任何操作。该组件将从视图中删除，并且无论如何都不会呈现任何内容。

此外，您不需要在状态中维护此值，而是使用 ref

const SMSVerifyEnterPinScreen = ({ route, navigation }) => {
const isMounted = useRef(true)
const { phoneNumber } = route.params
useEffect(() => {
if(navigation) {
signInWithPhoneNumber(phoneNumber)
}
return () => {isMounted.current = false;}
}, [])

async function signInWithPhoneNumber(phoneNumber) {
const confirmation = await auth().signInWithPhoneNumber('+1'+phoneNumber)
...
}
return (
...
)
}