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 (
    ...
  )
}

带有react-nav 5的RN 0.62.2-谢谢！

Answer 1

由于signInWithPhoneNumber是一个异步函数，并且将设置setState，因此您将看到警告，指出在响应可用之前已卸载组件

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

但是，如果卸载了组件，则不需要返回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 (
    ...
  )
}

反应本机挂钩-正确使用useEffect（）？

1 个答案: