Question

我有一个页面显示用户的书籍。在此MyBooks页面上，安装React组件。安装后，它会通过API获取用户的书籍。然后用用户的书更新组件的状态。

安装组件
通过API获取图书
有结果时，更新组件的状态
再次呈现BooksList组件（但没有发生）

这是我的MyBooks组件代码：

class MyBooks extends Component {
  // TODO: fetch user info
  constructor(props) {
    super(props);

    this.state = {
      books: [],
      errors: []
    };

    this.fetchBooks = this.fetchBooks.bind(this);
  }

  componentDidMount() {
    console.log('component mounted!');
    this.fetchBooks();
  }

  fetchBooks() {
    let _this = this;
    BooksLibraryApi.getBooks().then(foundBooks => {
      console.log('books found:', foundBooks);
      _this.setState({
        books: foundBooks
      });
    });
  }

  render() {
    console.log('MyBooks state:', this.state);
    return (
      <Section>
        <Container>
          <h1>My books</h1>
          <BooksList books={this.state.books} />
        </Container>
      </Section>
    );
  }
}

export default withRouter(MyBooks);

这是console.log('books found:', foundBooks)的结果：

这是我的BooksList组件代码：

class BooksList extends React.Component {
  render() {
    console.log('BooksList props:', this.props);
    return (
      <Columns breakpoint="mobile">
        {this.props.books.map((book, i) => {
          console.log(book);
          return (
            <Columns.Column
              key={i}
              mobile={{ size: 'half' }}
              desktop={{ size: 2 }}
            >
              <BookCard book={book} />
            </Columns.Column>
          );
        })}
      </Columns>
    );
  }
}

export default BooksList;

以下是BookCard组件的代码：

class BookCard extends React.Component {
  constructor(props) {
    super(props);
    console.log('props', props);
    this.readBook = this.readBook.bind(this);
    this.addBook = this.addBook.bind(this);
    this.deleteBook = this.deleteBook.bind(this);
    this.wantBook = this.wantBook.bind(this);
  }

  readBook() {
    BooksLibraryApi.readBook(this.props.book.id);
  }

  addBook() {
    BooksLibraryApi.addBook(this.props.book.id);
  }

  wantBook() {
    BooksLibraryApi.wantBook(this.props.book.id);
  }

  deleteBook(e) {
    BooksLibraryApi.deleteBook(this.props.book.id, e);
  }

  render() {
    return (
      <div className="card-book">
        <Link to={`/book/${this.props.book.id}`}>
          {this.props.book.doHaveThumbnail ? (
            <Image
              alt="Cover"
              src={this.props.book.thumbnailUrl}
              size={'2by3'}
            />
          ) : (
            <div className="placeholder">
              <span>{this.props.book.title}</span>
            </div>
          )}
        </Link>
        <Button fullwidth color="primary" size="small" onClick={this.wantBook}>
          Add to wishlist
        </Button>
      </div>
    );
  }
}

export default withRouter(BookCard);

未调用console.log组件中的BooksList。这意味着当this.props.books数组为空时，组件仅呈现一次。

我不明白为什么BooksList的道具更新时（MyBooks组件的状态更新时）不再次渲染。

奇怪的行为：我正在使用React Router，当我第一次单击链接“我的书”（转到我的MyBooks组件）时，它不起作用，但是当我再次单击时它，一切正常。这意味着渲染/组件的生命周期有问题。

谢谢。

React Component接收道具但不渲染它，为什么？

0 个答案: