反应不呈现状态变化时更新的UI

Question

我正在做一个小型项目，用户可以在其中编辑书籍信息。该应用程序向用户显示一个过滤器，以选择小说或自然科学学科类别。选择后，他会看到一本书籍清单，在其中可以通过单击“编辑”按钮来更改该书籍的详细信息。编辑时，他可以选择保存或取消表单详细信息。整个工作流程都在一个页面上！为此，我使用React，Redux和Redux形式，其中组件I -选择类别（小说，科学），组件II -该类别的图书清单和 component III -表单来编辑图书详细信息。 请参阅所附图片以想象应用程序。

应用程序的工作：用户选择小说/科学后，系统便分派了一项操作以列出可用的图书。单击某本书的“编辑”按钮后，将分派另一个操作以显示预先填充有该本书的值的表单（以便用户可以对其进行编辑）。

问题：不幸的是，由于无法使用道具，我的“编辑”表单组件未呈现所需的值；即使我可以看到使用正确的状态/道具进行的redux操作成功。

代码剖析：

1. SubjectChoice.jsx

const mapDispatchToProps = dispatch => ({ fetchBooks: favoriteSubject => dispatch(getBooksList(favoriteSubject)), fetchSubjects: _ => dispatch(getSubjectsList()) });

因此，此组件正确分配了getSubjectsList，我可以将fetchSubjects用作componentDidMount上的道具。同样，它根据选择的主题调度另一个动作getBooksList(favoriteSubject)，并且fetchBooks可用作handleChange回调的道具（这些动作会发出API请求；实际上，所有操作都可以）

1. BookList.jsx

const mapDispatchToProps = dispatch => ({ fetchBookDetails: bookId => dispatch(getBookDetails(bookId)) });

因此，此组件在getBookDetails上正确调度了handleEdit操作，这是“编辑”按钮回调。

1. BookEdit.jsx

const mapStateToProps = state => ({ book: state.book.bookDetails, ... }... render() { const { bookDetails, loading, error } = this.props.book; ... }

现在，此组件一直在等待重新渲染，但从未收到道具。我在控制台中（从BooksList.jsx组件看到了动作，reducer正确调度了，但从没有看到它们反映在屏幕上。

SO的答案如何不能帮助我摆脱这种局面：我看到了以下答案：指定Redux进行了浅层比较，并且在上一个和下一个之间没有发现细微的差别状态，然后跳过呈现应用程序。但是，正如第三步中提到的，我可以正确地看到具有上一个和下一个状态的动作和减速器。

Answer 1

如果BookEdit未连接到商店，或者未从父组件传递道具，则您将无权访问它们。连接您的BookEdit ...

import { connect } from 'react-redux;
...
const mapStateToProps = ({ book }) => {
  const { bookDetails, loading, error } = book;
  return { bookDetails, loading, error };
}
export default connect(mapStateToProps)(BookEdit);

或者将它们从与您商店关联的道具的父级关联组件传入。

Answer 2

每次调度Redux操作时，将执行mapStateToProps。仅当mapStateToProps的道具与先前的道具不相等时，react-redux的connect函数才会重新渲染您的组件。