Question

我正在尝试向我的React应用程序添加Delete功能。因此，我创建了一个删除模型组件。而且我在主页上使用它。

主页组件：


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()内调用下拉render方法，以及Delete Component的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

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

Answer 2

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

在onClick = {openUserDelete ()}之后删除括号。

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

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

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

2 个答案: