setState не работает в реакции- bootstrap модально

Question

Когда я хочу использовать setState, он не будет работать. например, закрыть или открыть bootstrap модальный.

Вот мой индекс . js содержимое:

import App from "./Modal";

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

А вот мой модальный . 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 Модальные реквизиты show получает значение логического типа, а не функцию обратного вызова.
• Вы наделены не нужно писать функции-обработчики внутри вашего ребенка, если вы хотите использовать его повторно. Кроме того, нет необходимости в _isMounted.
• Использование publi c синтаксиса поля класса (функция стрелки) вместо 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;