Question

在这种情况下，您可以帮我取消订阅吗？

docker-compose up -d
docker-compose logs redis-master1
# the error infomation below: 

Attaching to redis-master1
redis-master1    |  # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
redis-master1    |  # Redis version=5.0.9, bits=64, commit=00000000, modified=0, pid=6, just started
redis-master1    |  # Configuration loaded
redis-master1    |  # Unrecoverable error: corrupted cluster config file.

单击切换按钮，并且Child组件中的createUser函数未完成执行时，出现错误。不完全是useEffect清理功能中的操作。

Answer 1

如果在卸载组件后不想渲染任何东西，则可以使用此代码示例来实现。

我创建了_IsMounted变量并将其设置为false。调用useEffect时表示已安装组件，因此将_IsMounted设置为true。

从屏幕上卸载组件后，react调用从useEffect返回方法，并将_IsMounted设置为false。因此，当您尝试在未安装任何组件的情况下更新状态时，不会导致崩溃。

这不会取消订阅或异步代码，但它们不会影响应用程序或导致任何错误。

const Main = () => {
    var _IsMounted = false;
    const [ toggle, setToggle] = useState(false)

    return (
        <React.Fragment>
            {toggle && <Child />}
            <button onClick={() => setShow(prevState => !prevState)}>toggle</button>
        </React.Fragment>
    )
}

const Child = () => {
    const createUser () => {
        return createUserInTheDatabase()
            .then(() => {
                       if(_IsMounted)
                        {
                             setSuccess(true);
                         }
                     })
    }
}
useEffect(() => {
    _IsMounted = true;

     return(){
         _isMounted = false; 
     }
},[])
return (
     <React.Fragment>
        {success && <p>user created<p>}
            <button onClick={() => createUser()}>create user</button>
     <React.Fragment>
    );
}

Answer 2

使用 api post 登录：

第一个：

const [unmounted, setUnmounted] = useState(true);
  const [login, setIsLogin] = useState(true);
  useEffect(() => {
    if (login) setUnmounted(true); // this is not importent
    return () => {
      setIsLogin(false);
    };
  }, [login]);

第二步：

try {
  const req = await axios.post(`${URL_SERVER}/login`, {
    email,
    password,
  });
  if (unmounted) {
    setIsLogin(false);
    setUnmounted(false);

///....

}

取消所有订阅和异步任务

2 个答案: