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

Posted 2023-02-22

【中文标题】反应JS |在现有状态转换期间无法更新

【英文标题】：ReactJS | Cannot update during an existing state transition

【发布时间】：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.

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

【参考方案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