React 不会在状态更改时呈现更新的 UI

Question

我正在做一个小项目，用户可以在其中编辑图书信息。 该应用程序为用户提供了一个过滤器来选择小说或科学主题类别。 选择后，他会看到一个书籍列表，他可以通过单击编辑按钮更改书籍的详细信息。 在编辑时，他可以选择保存或取消表单详细信息。 整个工作流程都在一个页面上！ 为此，我使用 React、Redux 和 Redux-form，其中组件 I - 选择类别（小说、科学）、组件 II - 该类别的书籍列表和组件 III - 用于编辑书籍详细信息的表单。 请参阅附加图像以想象该应用程序。

应用程序的工作：一旦用户选择了小说/科学，就会调度一个动作来列出可用的书籍。 一旦他单击一本书的“编辑”按钮，就会调度另一个操作来显示预先填充了该书的值的表单（以便用户可以对其进行编辑）。

问题：不幸的是，由于该组件的 props 不可用，我的 Edit 表单组件没有呈现所需的值； 即使我可以通过正确的状态/道具看到我的 redux 操作的成功。

代码剖析：

1. 主题选择.jsx

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

所以，这个组件正确地调度getSubjectsList并且我可以使用fetchSubjects作为componentDidMount道具。 类似地，它根据选择的主题调度另一个动作getBooksList(favoriteSubject)并且fetchBooks可以用作handleChange回调的道具（这些动作发出 API 请求；实际上，所有这些动作）

2. 书单.jsx

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

因此，该组件在handleEdit上正确调度getBookDetails操作，即编辑按钮回调。

3. BookEdit.jsx

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

现在，这个组件一直在等待重新渲染，但它永远不会收到道具。 我看到操作，reducers 在控制台中正确调度（来自BooksList.jsx组件），但从未看到它们反映在屏幕上。

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 。 react-redux 的 connect 函数只会在mapStateToProps中的 props 不等于之前的 props 时重新渲染您的组件。