javascript - 子组件不会在 Prop 更改时重新渲染

Question

这是父组件:

    state = {
    books: undefined
  }

  componentDidMount() {
    BooksAPI.getAll().then(books => {
      this.setState({books},this.filterBooks);
    });
  }

  filterBooks() {
    this.currentlyReading = this.state.books.filter((book) => book.shelf === 'currentlyReading');
    this.read = this.state.filter((book) => book.shelf === 'read');
    this.wantToRead = this.state.filter((book) => book.shelf === 'wantToRead');
  }

  render() {
    return (
      <div className="app">
        <Route path="/search" component={SearchBook} />
        <Route exact
          path="/"
          render={() => <BookScreen
            currentlyReading={this.currentlyReading}
            read={this.read}
            wantToRead={this.wantToRead}
          />} />
      </div>
    )
  }

我希望在调用 filterBooks 之后 BookScreen 组件的 props 会发生变化并且组件应该重新呈现，但事实并非如此。我做错了什么？

Answer 1

在我看来，目前最好的方法，仍然沿用React的方法是:在有了books数据之后，只调用1个函数，这个函数会处理一切，完成后更新状态(我们将 books 对象作为参数传递)，如下所示:

  componentDidMount() {
    BooksAPI.getAll().then(books => {
      this.filterBooks({books});
    });
  }

  filterBooks = (books) => {
    this.currentlyReading = books.filter((book) => book.shelf === 'currentlyReading');
    this.read = books.filter((book) => book.shelf === 'read');
    this.wantToRead = books.filter((book) => book.shelf === 'wantToRead');
    this.setState({ books: books });
  }

如果您有任何错误，请随时在这里发帖，我们一起解决!

========

添加了关于为什么作者的原始代码不起作用的解释:

基于我对 React 和 JS 的一点经验:

设置新状态时，可能需要一些时间(可能需要 100-300 毫秒，这就是为什么您使用语法 this.setState({books} ,this.filterBooks)

=> 这似乎是正确的，这意味着在已经设置了新状态的 books 之后，您可以通过 filterBooks 函数访问它。)

但是:在 books 的新状态设置后，页面将被重新渲染，并且 filterBooks 将被执行(可能同时 => 不确定哪个先结束，例如，如果 render() 首先发生，则 this.currentlyReading 在 render() 中仍未定义filterBooks 的结果已完全设置!

也就是说，React就是Javascript，Javascript的异步比较麻烦!