值在setState reactjs

Question

我正在尝试预先填充我在redux商店中保存的过滤器值，当用户导航回设置过滤器的页面时。但是，当我要设置状态时，我在覆盖现有设置值时遇到问题。这是我在构造函数中设置状态的方式：

this.state = {
  hierarchyTableFilters: {
    hierarchy: null,
    signOffStatus: null,
  },
};

然后这就是我将如何使用redux中存储的数据设置被调用函数中的状态：

const {userState} = this.props.userInfo;
const previouslySelectedFilter = userState.state.hierarchyTableFilters;

if (previouslySelectedFilter) {
  this.setState({
    hierarchyTableFilters: {
      hierarchy: previouslySelectedFilter.hierarchy,
      signOffStatus: previouslySelectedFilter.signOffStatus,
    },
  });

最后设置的状态是唯一显示为预过滤的过滤器。有没有办法为对象中的两个不同值设置状态，还是我必须以不同的方式解决这个问题？

Answer 1

如果需要根据以前的本地状态设置本地状态，则应使用setState回调模式。

this.setState(previousState => ({ ... }))

这是因为setState进行批量更新。请参阅setState

上的文档

Answer 2

你可以展平你的数据结构以利用setState合并功能吗？

this.state = {
   filtersHierarchy: null
   filtersSignOffStatus: null
 };

后者是：

if (previouslySelectedFilter) {
  const { hierarchy, signOffStatus } = previouslySelectedFilter;
  let newState = {};
  if (hierarchy) newState.filtersHierarchy = hierarchy;
  if (signOffStatus) newState.filtersSignOffStatus = signOffStatus;
  this.setState(newState);
}