时间戳

首页 > 解决方案 > “要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。” 错误但我没有使用它

reactjs - “要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。” 错误但我没有使用它

问题描述

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

我已经尝试了一切来修复，但没有任何效果。我什至没有使用“useEffect”。当我登录帐户并将用户导航到搜索页面时会发生这种情况。

loginScreen.js

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .label("Email")
    .email("Enter a valid email")
    .required("Please enter a registered email"),
  password: Yup.string()
    .label("Password")
    .required()
    .min(6, "Password must have at least 6 characters "),
});
const { width, height } = Dimensions.get("window");
class loginScreen extends React.Component {
  state = {
    passwordVisibility: true,
    rightIcon: "ios-eye",
  };

  goToSignup = () => this.props.navigation.navigate("Signup");

  handlePasswordVisibility = () => {
    this.setState((prevState) => ({
      rightIcon: prevState.rightIcon === "ios-eye" ? "ios-eye-off" : "ios-eye",
      passwordVisibility: !prevState.passwordVisibility,
    }));
  };
  handleOnLogin = async (values, actions) => {
    const { email, password } = values;
    try {
      const response = await this.props.firebase.loginWithEmail(
        email,
        password
      );

      if (response.user) {
        this.props.navigation.navigate("App");
      }
    } catch (error) {
      alert("Seems like there is no account like that. Try something else.");
    } finally {
      actions.setSubmitting(false);
    }
  };

searchScreen.js

class searchScreen extends Component {
  apiurl = "";
  _isMounted = false;
  constructor(props) {
    super(props);
    this.state = {
      searchText: "",
      results: [],
      isLoading: true,
    };
  }

  showMovie = async (imdbID) => {
    await axios(this.apiurl + "&i=" + imdbID).then(({ data }) => {
      let result = data;
      this.props.navigation.navigate("Movie", {
        selected: result,
        movieID: imdbID,
      });
    });
  };
  componentDidMount() {
    this._isMounted = true;
    this.initial();
  }
  componentWillUnmount() {
    this._isMounted = false;
  }

  initial = async () => {
    const user = await this.props.firebase.getUser(user);

    try {
      await AsyncStorage.setItem("useruid", user.uid);
    } catch (error) {
      console.log(error);
    }
    const expoToken = await UserPermissions.registerForPushNotificationsAsync();
    if (expoToken) {
      this.props.firebase.setExpoToken(expoToken);
    }
    if (this._isMounted) {
      this.setState({ isLoading: false });
    }
  };
  search = async () => {
    Keyboard.dismiss();
    await axios(this.apiurl + "&s=" + this.state.searchText).then(
      ({ data }) => {
        let results = data.Search;
        if (this._isMounted) {
          this.setState((prevState) => {
            return { ...prevState, results: results };
          });
        }
      }
    );
  };

标签： reactjsreact-nativeexpo

解决方案

成功登录后，调用导航功能。这将导航到不同的组件，这意味着登录组件将被卸载。尽管在 finally 语句中，handleLogin 函数仍有更多逻辑要执行，但您将提交设置为 false。当它最终运行时，没有安装的组件，这意味着没有要设置的状态。

将您的提交错误状态更改移动到导航调用之前和警报之前将解决问题。

我建议在用户实际登录的情况下不要打扰它，因为用户即将在视觉上移动到一个完全不同的屏幕，更改状态并不能真正帮助他们。

推荐阅读