Question

我正在尝试创建一个图书应用程序，我想做的是，当单击每本书的按钮时，弹出窗口中会显示该图书的信息。我有一个Book组件，以及一个由Book组件调用的BookPopup组件，并将道具传递给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>
    );
  }
}

如果有人可以提供帮助，我将非常感谢。谢谢！

反应弹出窗口无法正确呈现

0 个答案: