值在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);
}