关闭模式对话框时尝试更新父属性的状态时出现反应错误

Question

我有一个包含编辑选项的帐户表。单击编辑选项时，将显示帐户编辑模式对话框。用户可以通过单击右上角的“X”或单击关闭按钮来关闭或取消编辑。当模式关闭时，我想清除一些状态属性，包括对话框属性和父组件属性。对话框属性更新没有任何问题，但我收到这个错误时，父属性试图更新：

无法在现有状态转换期间更新（例如在渲染中）。渲染方法应该是道具和状态的纯函数。

这是父组件：

export class Accounts extends Component {

    constructor(props, context) {
        super(props);
        this.state = {
            loading: true,
            showEditUserModal: false,                
            userId: null,
            redraw: false,
        }
        this.handleAccountEdit = this.handleAccountEdit.bind(this);
    }

    handleAccountEdit(cell, row, rowIndex) {
        this.setState({ userId: cell },
            this.setState({ showEditUserModal: true }));
    }
    
    //This is parent function being called from dialog close Error occurs here
    handleAccountEditClose() {
        this.setState({ userId: null, showEditUserModal: false, redraw: true });
    }

    render() {
        return (
            <div className='container-fluid'>
                {this.state.showEditUserModal ?
                    <AccountEditModal userId={this.state.userId}
                        parentCloseAccountEditModal={() => this.handleAccountEditClose()}></AccountEditModal>
            </div>
            )
        }

AccountEditModal：

export default class AccountEditModal extends React.Component {
    constructor(props, context) {
        super(props);
        this.state = {
            uId: null,
            userName: '',
            showModal: true,
        }        
    }

    handleClose = (e) => {
        this.setState({ showModal: false, uId: null, userName: '' });
    }
    
    render() {        
        return (            
                <div >
                    <Modal show={this.state.showModal} onHide={() => { this.handleClose(); this.props.parentCloseAccountEditModal() }} centered >
                        <Modal.Header closeButton>
                            <Modal.Title>Account Edit</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <div className="row">                                    
                                <div className="row pad-top float-right">
                                    <div className='col-md-2 my-auto'>
                                        <span id='btnCloseAccountEdit' onClick={() => { this.handleClose(); this.props.parentCloseAccountEditModal() }}
                                            className='btn btn-success'>Close</span>
                                    </div>
                                </div>
                            </div>
                        </Modal.Body>
                    </Modal>
                </div>
        )
    }

如何更新父组件属性而不出现此错误？

建议的解决方案不调用父组件函数。我在AccountEditModal中将handleClose更改为lambda，但仍然收到相同的错误。




Answer 1

重置组件的一个简单方法是使用密钥对其进行管理。见：https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-带钥匙的完全非受控组件

更准确地说：

当某个键发生更改时，React将创建一个新的组件实例，而不是更新当前组件实例。

因此，接下来，您可以使用一个时间码，这样每次调用这个模态窗口时，都会创建一个带有默认值的新实例。像这样：

<AccountEditModal 
    key={Date.now()} 
    userId={this.state.userId}
    parentCloseAccountEditModal={() => this.handleAccountEditClose()}> 
</AccountEditModal>

那么您就不需要这个函数和这个调用：this。handleClose（） 只需调用这个：这个。道具。parentCloseAccountEditModal（）下次调用该模式时，将有一个新实例。

对于普通组件，它可能会引入不需要的行为，但对于模式窗口，它通常正是目的：每次关闭/打开它时，您都需要一个重置状态，并且除了打开它之外，您不会更改道具-因为它是模式窗口，因此会阻止与父窗口的交互。

Answer 2

我不知道你在做什么，不同于我，但根据你的代码和解释，我创建了这个演示应用程序，它是正常工作，没有任何错误。您可能希望将其与应用程序进行比较，并检查应用程序中的不同之处。

在这里找到工作代码和盒子。

账户js

import React, { Component } from "react";
import { AccountEditModal } from "./AccountEditModal";

export class Accounts extends Component {
  constructor(props, context) {
    super(props);
    this.state = {
      loading: true,
      showEditUserModal: false,
      userId: null,
      redraw: false
    };
    this.handleAccountEdit = this.handleAccountEdit.bind(this);
  }

  handleAccountEdit(cell) {
    this.setState({ userId: cell }, this.setState({ showEditUserModal: true }));
  }

  //This is parent function being called from dialog close Error occurs here
  handleAccountEditClose() {
    this.setState({ userId: null, showEditUserModal: false, redraw: true });
  }

  render() {
    return (
      <div className="container-fluid">
        {this.state.showEditUserModal ? (
          <AccountEditModal
            userId={this.state.userId}
            parentCloseAccountEditModal={() => this.handleAccountEditClose()}
          ></AccountEditModal>
        ) : (
          <table>
            {this.props.users.map((uId) => {
              return (
                <tr>
                  <td>
                    <button onClick={() => this.handleAccountEdit(uId)}>
                      {uId}
                    </button>
                  </td>
                </tr>
              );
            })}
          </table>
        )}
      </div>
    );
  }
}

AccountEditModal。js

import React, { Component } from "react";
import { Modal } from "react-bootstrap";

export class AccountEditModal extends Component {
  constructor(props, context) {
    super(props);
    this.state = {
      uId: null,
      userName: "",
      showModal: true
    };
  }

  handleClose = (e) => {
    this.setState({ showModal: false, uId: null, userName: "" });
  };

  render() {
    return (
      <div>
        <Modal
          show={this.state.showModal}
          onHide={() => {
            this.handleClose();
            this.props.parentCloseAccountEditModal();
          }}
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title>Account Edit: {this.props.userId}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className="row">
              <div className="row pad-top float-right">
                <div className="col-md-2 my-auto">
                  <span
                    id="btnCloseAccountEdit"
                    onClick={() => {
                      this.handleClose();
                      this.props.parentCloseAccountEditModal();
                    }}
                    className="btn btn-success"
                  >
                    Close
                  </span>
                </div>
              </div>
            </div>
          </Modal.Body>
        </Modal>
      </div>
    );
  }
}

我在应用程序中添加了虚拟应用程序数据。js:

import React, { useState } from "react";
import { Accounts } from "./Accounts";

import "./styles.css";

export default function App() {
  const [users] = useState([
    "User1",
    "User2",
    "User3",
    "User4",
    "User5",
    "User6",
    "User7",
    "User8",
    "User9",
    "User10"
  ]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Accounts users={users}></Accounts>
    </div>
  );
}