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

Question

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

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

登录屏幕.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);
    }
  };

搜索屏幕.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 };
          });
        }
      }
    );
  };

Answer 1

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

\n

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

\n

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

\n