React Popup не рендерится правильно - PullRequest
0 голосов
/ 14 февраля 2020

Я пытаюсь создать книжное приложение, и я хочу, чтобы при нажатии кнопки для каждой книги всплывающее окно отображало информацию о книге. У меня есть компонент Book и компонент BookPopup, который вызывается компонентом Book, и я передаю реквизиты в компонент BookPopup. Проблема в том, что когда я нажимаю на кнопку «больше информации», она не генерирует всплывающее окно для нужной книги. Есть три книги подряд, и когда я нажимаю на кнопку «больше информации», в этих трех книгах создается, казалось бы, случайная книга. Я не уверен, что происходит. Вот мой код для компонента Book.

export default class Book extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showPopup: true
    };
  }

  togglePopup = () => {
    this.setState({
      showPopup: !this.state.showPopup
    });
  };
  render() {
    const { volumeInfo } = this.props.book;
    let authors;
    if (Array.isArray(volumeInfo.authors) && volumeInfo.authors.length > 0) {
      authors = volumeInfo.authors.join(", ");
    } else {
      authors = null;
    }
    console.log(this.state.showPopup);
    return (
      <div>
        <img src={volumeInfo.imageLinks.smallThumbnail} />
        <div className="card-body">
          <h6 className="card-title">{volumeInfo.title}</h6>
          {console.log(volumeInfo.authors)}
          <p>{authors}</p>
        </div>
        <ShelfChanger />
        <button
          type="button"
          class="btn btn-info btn-lg"
          data-toggle="modal"
          data-target="#myModal"
          onClick={this.togglePopup}
        >
          More Info
        </button>
        {this.state.showPopup ? <BookPopup info={volumeInfo} /> : null}
      </div>
    );
  }
}

А для компонента BookPopup:

export default class BookPopup extends Component {
  render() {
    const {
      authors,
      title,
      description,
      publisher,
      publishedDate,
      industryIdentifiers,
      imageLinks
    } = this.props.info;
    let stringAuthors;
    if (Array.isArray(authors) && authors.length > 0) {
      stringAuthors = authors.join(", ");
    } else {
      stringAuthors = null;
    }
    let ISBN_type;
    let ISBN_num;
    if (industryIdentifiers != undefined) {
      ISBN_type = industryIdentifiers[0].type;
      ISBN_num = industryIdentifiers[0].identifier;
    }

    return (
      <div className="modal fade" id="myModal" role="dialog">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h4 className="modal-title">{title}</h4>
              <button type="button" className="close" data-dismiss="modal">
                &times;
              </button>
            </div>
            <div className="modal-body">
              <img src={imageLinks.smallThumbnail} alt={title} />
              <p className="book-description">Author(s): {stringAuthors}</p>
              <p className="book-description">Description: {description}</p>
              <p className="book-description">Publisher: {publisher}</p>
              <p className="book-description">
                Published Date: {publishedDate}
              </p>
              <p className="book-description">
                {ISBN_type} : {ISBN_num}
              </p>
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-default"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Родительский компонент компонента Book:

export default class BookList extends Component {
  render() {
    return (
      <div className="book-list">
        {this.props.books.map(book => {
          return (
            <div className="book-item card" key={book.id}>
              <Book book={book} />

            </div>
          );
        })}
      </div>
    );
  }
}

Если кто-то может помочь, я был бы очень признателен. спасибо !!

...