反应JS |在现有状态转换期间无法更新答案

【问题标题】：ReactJS | Cannot update during an existing state transition反应JS |在现有状态转换期间无法更新
【发布时间】：2019-08-19 00:06:05
【问题描述】：

我正在尝试将删除功能添加到我的 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 withinrender). Render methods should be a pure function of props and state.

我不确定我在这里做错了什么。对我来说，这似乎是合法的。你能解释一下我做错了什么吗？谢谢！！

【问题讨论】：

标签： javascript reactjs typescript redux state

【解决方案1】：

您正在调用 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>

【讨论】：

【解决方案2】：

您无需调用onClick 的回调，因为它最终会在渲染时立即被调用。

删除 onClick={openUserDelete()} 后面的括号。

您的openUserDelete 被立即调用（在渲染时）并更改状态对象。

更改状态会导致重新渲染，您可以想象这会如何失控... render > change > render > change...etc

【讨论】：