setState 在反應引導模式中不起作用

Question

當我想使用 setState 時，它​​不起作用。 例如關閉或打開引導模式。

這是我的index.js內容：

import App from "./Modal";

ReactDOM.render(<App />, document.getElementById("root"));

這是我的Modal.js內容：

import React, { Component } from "react";
import socket from "socket.io-client";
import Modal from "react-bootstrap/Modal";

const Socket = socket.connect("ws://127.0.0.1:3004");

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.onChange = this.onChange.bind(this);
  }
  onChange(event, type) {
    this.setState({ show: false });
  }
  render() {
    const { show } = this.state;
    return <Child onChange={this.onChange.bind(this, show)} />;
  }
}

class Child extends Component {
  _isMounted = false;
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }
  handleShow() {
    if (this._isMounted) {
      this.setState({ show: true });
      this.props.onChange(true, true);
    }
  }
  handleClose() {
    if (this._isMounted) {
      this.setState({ show: false });
      this.props.onChange(false, false);
    }
  }
  modal(response) {
    if (this._isMounted) {
      this.setState({ show: true });
      this.props.onChange(true, true);
    }
  }
  componentDidMount() {
    this._isMounted = true;
    Socket.on("message", data => this.modal(data));
  }
  render() {
    return (
      <>
        <Modal
          size="lg"
          show={this.handleShow}
          onHide={this.handleClose}
          aria-labelledby="st-lg-modal"
        >
          <Modal.Header closeButton>
            <Modal.Title id="st-lg-modal">Modal Name</Modal.Title>
          </Modal.Header>
          <Modal.Body>Contents</Modal.Body>
        </Modal>
      </>
    );
  }
}

export default Parent;

但是 setState 不起作用。

看看我的例子： https : //codesandbox.io/s/epic-herschel-344dl

演示： https : //344dl.csb.app/

關閉按鈕不起作用！

如何解決這個問題？

Answer 1

一些注意點：

• React-bootstrap Modal props show正在接收布爾類型值，而不是回調函數。
• 如果您想重用它，則無需在您的孩子內部編寫處理程序函數。 以及不需要_isMounted 。
• 使用公共類字段語法（箭頭函數）而不是bind(this)可以減少您的代碼並帶來更好的性能。

---

模態現在可以正常關閉。

import React, { Component } from "react";
import socket from "socket.io-client";
import Modal from "react-bootstrap/Modal";

const Socket = socket.connect("ws://127.0.0.1:3004");

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true
    };
  }
  onChange = () => {
    this.setState(perv => { show: !prev.show });
  };
  render() {
    const { show } = this.state;
    return <Child onChange={this.onChange} show={show} />;
  }
}

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    Socket.on("message", data => this.modal(data));
  }
  render() {
    const { show, onChange } = this.props;
    return (
      <>
        <Modal
          size="lg"
          show={show}
          onHide={onChange}
          aria-labelledby="st-lg-modal"
        >
          <Modal.Header closeButton>
            <Modal.Title id="st-lg-modal">Modal Name</Modal.Title>
          </Modal.Header>
          <Modal.Body>Contents</Modal.Body>
        </Modal>
      </>
    );
  }
}

export default Parent;