Как заставить мой компонент Collapse работать в приложении reactjs?

Question

Проверьте код ниже, я использовал компонент «Свернуть» в реактивном ремне, но он не работает, как должно быть. Какие изменения я должен сделать, чтобы это работало.

import { Component } from "react";
import React from "react";
import { Collapse, Navbar } from "reactstrap";
class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }
  show() {
    this.setState({
      open: !this.state.open
    });
  }
  render() {
    return (
      <>
        <button onClick={() => this.show()}>Show</button>
        <Collapse isOpen={this.state.open} navbar>
          <Navbar>hello</Navbar>
        </Collapse>
      </>
    );
  }
}
export default Main;

Answer 1

Я думаю, что проблема возникает в вашем методе show, так как this.state обновляется асинхронно. Правильный синтаксис должен быть следующим:

show() {
    this.setState(prevState => ({ open: !prevState.open}));
}

Вы можете обратиться к этой документации: https://reactjs.org/docs/state-and-lifecycle.html#state -updates-may-be-asynchronous