错误：尝试运行 create-react-app 时出现 memory

Question

当我在 chrome (create-react-app) 中运行 npm start 时，加载需要一段时间，然后崩溃。 错误显示“内存不足”。 我清除了所有选项卡和缓存，并且由于其他应用程序运行良好，我已经能够判断错误出在代码中。 当我删除 Reserve_Button 组件时，应用程序运行正常。 我认为可能存在与 SetState 相关的某种 memory 泄漏，但我对 React 比较陌生，所以我能说的不多。

import React from "react";
import "./reserve_button.css";
// import Reserve_Form from "./Reserve_Form";
// import { connect } from "react-redux";
// import { submitreservation } from "../../Actions/index";
import Modal from "./modal";

class Button extends React.Component {
  state = {
    firstname: "",
    Lastname: "",
  };
  showmodal = {
    open: false,
  };

  // onSubmit = (formValues) => {
  //   this.props.submitreservation(formValues);
  // };

  showModal() {
    if (this.state.open) {
      return (
        <Modal
          open={this.state.open}
          onDismiss={() => this.setState({ open: false })}
          title="Modal Title"
          content="Modal Body"
          actions={<div className="ui button">Button</div>}
        />
      );
    }
  }

  render() {
    return (
      <div className="body">
        <Button
          onClick={() => this.setState({ open: !this.state.open })}
          className="neon-button"
        >
          Reserve session
        </Button>
        {this.showModal()}
      </div>
    );
  }
}
// <Reserve_Form onSubmit={this.onSubmit} />;
// export default connect(null, { submitreservation })(Button);
export default Button;

这是模式：

import React from "react";
import ReactDOM from "react-dom";

const Modal = (props) => {
  return ReactDOM.createPortal(
    <div onClick={props.onDismiss}>
      <div onClick={(e) => e.stopPropagation()}>
        <i onClick={props.onDismiss}></i>
        <div className="header">{props.title}</div>
        <div className="content">{props.content}</div>
        <div className="actions">{props.actions}</div>
      </div>
    </div>,
    document.querySelector("section")
  );
};
export default Modal;

模态的 CSS 文件中没有设置 class 名称，但我认为 CSS 不是问题的根源。

更新：当我控制台记录 this.state.open 时，它每秒打印 1000 次“false”

Answer 1

您可以对代码进行优化。 也许它会帮助修复错误：而不是

   <Button
      onClick={() => this.setState({ open: !this.state.open })}
      className="neon-button"
   >

当依赖于反应组件的前一个 state 时，使用前一个 state 来更新值。 它看起来像这样：

   <Button
        onClick={() => this.setState((prevState) => { open: !prevState.open })}
        className="neon-button"
   >

通过这样做，我们引用了 this.state.open 的前一个 state。 这一点特别重要，因为并非所有 state 更新都会立即发生，因此有可能在您的方法中引用 this.state.open 的旧值。