ReactJS | 在现有状态转换期间无法更新

Question

I am trying to add Delete Functionality, to my React Application. So, I created a Delete Model Component. And I am using it in my main page.

Main-Page Component:

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>

Of course I call the dropdown render Method inside the main render() , along with the render method for the Delete Component:

  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}
      />
    );
  };

But I get this ERROR: warning: Cannot update during an existing state transition (such as within render ). Render methods should be a pure function of props and state. ). Render methods should be a pure function of props and state.

I am not sure what am I doing wrong here. To me, it seems legit. Can you explain what am I doing wrong. Thank you!!

Answer 1

you are making call to openUserDeleteModal onClick={this.openUserDeleteModal()} which is causing update of state while rendering the component try the following :

 <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>

Answer 2

You need not invoke the callback to your onClick as that will end up being immediately called upon render.

Remove the parenthesis following onClick={openUserDelete () }.

Your openUserDelete is being called straight away (upon render) and changes the state Object.

changing the state causes a re-render and you can imagine how this would get out of hand... render > change > render > change...etc