ReactJS | Не удается обновить во время существующего перехода состояния

Question

Я пытаюсь добавить функциональность удаления в свое приложение React.Итак, я создал компонент удаления модели.И я использую его на своей главной странице.

Компонент главной страницы:

import IUser from '../../dto/IUser';

import DeleteUser from '../../components/DeleteUser';
import { listUsers, getUser, deleteUser } from '../../config/service';

interface UserDetailsProps extends RouteComponentProps<RouteUserInfo> {
  notify(options: object): any;
  actualValue: string;
  callBack: any;
  label: string;
}

interface RouteUserInfo {
  username: string;
}

export interface IState {
  errorMessage: LensesHttpResponseObj | null;
  isUserDeleteModalOpen: boolean;
  isLoading: boolean;
  user: IUser | null;
}

const UserToolTip = (props: any): JSX.Element => (
  <LensesTooltip id="isActive" place="right" {...props} />
);

export class UserDetailsPage extends Component<UserDetailsProps, IState> {
  hasBeenMounted = false;

  state: IState = {
    isUserDeleteModalOpen: false,
    errorMessage: null,
    isLoading: false,
    user: null
  };

  componentDidMount(): any {
    this.hasBeenMounted = true;
    this.onFetchData();
  }

  componentWillUnmount(): void {
    this.hasBeenMounted = false;
  }

  getUserUsername = (): string => {
    const { match } = this.props;
    return match.params.username;
  };

  onFetchData = () => {
    this.setState({
      isLoading: true
    });
    return this.onFetchUser();
  };

  onFetchUser = () =>
    getUser(this.getUserUsername())
      .then(username => {
        if (this.hasBeenMounted && typeof username !== 'undefined') {
          this.setState({
            isLoading: false,
            user: username.data
          });
        }
      })
      .catch((errorResponse: HttpResponseObj | null = null) => {
        if (this.hasBeenMounted) {
          this.setState({
            isLoading: false,
            user: null,
            errorMessage: errorResponse
          });
        }
      });

  openUserDeleteModal = () => {
    this.setState(prevState => ({
      ...prevState,
      isUserDeleteModalOpen: true
    }));
  };

  closeUserDeleteModal = () => {
    this.setState(prevState => ({
      ...prevState,
      isUserDeleteModalOpen: false
    }));
  };


// Dropdown Render Method:
<Item onClick={this.openUserDeleteModal()}> // The error appears when I add the onClik
  <Icon icon="trash-o" className=" pl-0 py-2 col-1" />
  <span className="col pr-0 mr-0">Delete User</span>
</Item>

Конечно, я вызываю метод рендеринга внутри основного render()вместе с методом рендеринга для компонента удаления:

  renderUserDeleteModal = (): JSX.Element | null | void => {
    const { isUserDeleteModalOpen, user } = this.state;

    if (!user || !user.username) {
      return null;
    }

    return (
      <DeleteUser
        isModalOpen={isUserDeleteModalOpen}
        user={user}
        onSuccess={this.closeDeleteModalSuccess}
        onCloseModal={this.closeUserDeleteModal}
      />
    );
  };

Но я получаю эту ОШИБКУ: warning: Cannot update during an existing state transition (such as within рендер ). Render methods should be a pure function of props and state.

Я не уверен, что я делаю здесь неправильно.Мне это кажется законным.Можете ли вы объяснить, что я делаю не так?Спасибо !!

Answer 1

Вам не нужно вызывать обратный вызов для вашего onClick, так как он будет немедленно вызван при рендере.

Удалить скобки после onClick = {openUserDelete ()}.

Ваш openUserDelete вызывается сразу (после рендера) и меняет состояние объекта.

изменение состояния вызывает повторную визуализацию, и вы можете представить, как это вышло бы из-под контроля ... render > change > render > change...etc

Answer 2

вы делаете вызов openUserDeleteModal onClick = {this.openUserDeleteModal ()}, который вызывает обновление состояния при рендеринге компонента, попробуйте следующее:

 <Item onClick={this.openUserDeleteModal}> 
 onClik
 <Icon icon="trash-o" className=" pl-0 py-2 col-1" />
 <span className="col pr-0 mr-0">Delete User</span>
 </Item>