React中复杂状态的深度合并

• Z时代
• 2024-01-10
• 分类：问答

当我声明以下初始状态时：

  getInitialState: function() {
    return {
      isValid: false,
      metaData: {
        age: 12,
        content_type: 'short_url'
      }
    };
  },

我用setState这样更新状态：

...
let newMetaData = {  age: 20 };
...
this.setState({
        isValid: true,
        metaData: newMetaData
      });
...

结果this.state.metadata对象仅定义了年龄。但据我所知，this.setState()将其参数合并到现有状态。为什么它在这里不起作用，这不是应该经常合并吗？

回答：

setState执行浅合并。如果metaData是平坦的：

this.setState({
  metaData: Object.assign({}, this.state.metaData, newMetaData),
});

或者使用点差：

this.setState({
  metaData: { ...this.state.metaData, ...newMetaData },
});

以上是 React中复杂状态的深度合并 的全部内容， 来源链接： utcz.com/qa/412531.html