Невозможно установить состояние неустановленного компонента в реакции - PullRequest
Новая
       16

Невозможно установить состояние неустановленного компонента в реакции

0 голосов
/ 28 января 2019

Я новичок в реакции и редуксе.Вот что я делаю:

У меня есть компонент, который похож на 

class LandingPage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isloading: true
    }
  }

  componentDidMount() {
    this.props.fetchJobDescription().then(() => {
      this.setState({
        isloading: false
      })
    });
  }

render() {
    if (this.state.isloading) {
      return null;
    }
    else if (this.props.jobs && this.props.jobs.content && this.props.jobs.content.length > 0) {
      return <JobList />;
    }
    else if (this.props.isError) {
      return <ErrorComponent />
    }
    else {
      return <Redirect to="/create-job" />
    }
  }
}

действие похоже на 

export function fetchUserJd() {
  return (dispatch) => {
    let url = FETCH_JD_ROOT_URL + page + "&" + size;
    dispatch({
      type: REQUEST_INITIATED
    })
    return get(url)
      .then((response) => {
        if (response.status === 200) {
          dispatch({
            type: FETCHING_JOBDESCRIPTION_SUCCESS,
            data: response.payload
          })
          dispatch({
            type: REQUEST_SUCCESSED
          })
        } else {
          if (!response.status) {
            toastr.error('Our server is down. Please check again');
          }
          else if (response.status.status === 401) {
            dispatch(logout());
          }
          else if (response.status.status === 500) {
            toastr.error("Error while Fetching the job description,Please try again");
            dispatch({
              type: FETCHING_JOBDESCRIPTION_SUCCESS,
              data: response.status,
            });
            dispatch({
              type: REQUEST_SUCCESSED
            })
          } else {
            dispatch({
              type: REQUEST_SUCCESSED
            })
          }
        }
      })
    return Promise.resolve();
  }
};

Теперь мой выход из системы, 

export function logout() {
    console.log("calling the logout action");
    localStorage.clear();
    history.push('/login');
    return {
        type: LOGOUT_REQUEST
    }
}

class Header extends React.Component {

  constructor(props) {
    super(props);
  }

  logout = (e) => {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    e.preventDefault();
    this.props.logout();
  }


  render() {
    return (
      <Fragment>
        <Navigation
          isAuthenticated={localStorage.getItem("access_token") ? true : false}
          operationType={this.props.operationType}
          logout={this.logout} />
      </Fragment>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    isAuthenticated: state.LoginReducer.isAuthenticated,
    operationType: state.Header.operationType,
  }
}

Здесь, когда есть недопустимый токен, такой как при получении, он дает мне 401 несанкционированный, тогда я перенаправляю использование для действия выхода из системы.теперь,

, когда я делаю это в тот раз, я получаю сообщение об ошибке: 

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in LandingPage (created by Context.Consumer)
    in Connect(LandingPage) (created by Route)

Как я могу устранить эту ошибку?

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Проблема в том, что вы устанавливаете состояние после размонтирования компонента.Проблема может заключаться в том, что вы делаете api hit, компонент размонтируется, затем возвращается ответ api, который устанавливает состояние.Если вы используете axios, он может быть обработан . 

// in the component
signal = axios.CancelToken.source();
// in componentWillUnmount
this.signal.cancel('API was cancelled');
0 голосов
/ 28 января 2019

Это небольшая проблема, которая возникает в вашем коде.Когда вы получаете токен 401, вы пытаетесь перенаправить на выход изнутри создателя действия, используя history.push, который размонтирует ваш компонент LandingPage, но в то же время вы пытаетесь setState с loading: false, таким образом, вы получаете этопредупреждение.Решение простое 

class LandingPage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isloading: true
    }
    this._mounted = true;
  }

  componentDidMount() {
    this.props.fetchJobDescription().then(() => {
      if (this_mounted) {
         this.setState({
           isloading: false
         }) 
      }
    });
  }

  componentWillUnmount() {
     this._mounted = false;
  }
render() {
    if (this.state.isloading) {
      return null;
    }
    else if (this.props.jobs && this.props.jobs.content && this.props.jobs.content.length > 0) {
      return <JobList />;
    }
    else if (this.props.isError) {
      return <ErrorComponent />
    }
    else {
      return <Redirect to="/create-job" />
    }
  }
}

, иначе в создателе действия вы можете выдать ошибку вместо отправки действия выхода из системы, а в блоке .catch fetchJobDescription отправить действие выхода из системы

В LandingPage 

this.props.fetchJobDescription().then(() => {
       this.setState({
           isloading: false
       }) 
    }).catch((err) => {
        this.props.logout();
    });

и в действии создатель 

  else if (response.status.status === 401) {
        throw new Error('Error in status')
  }
...