反应:是先前的状态'被认为是可变的?

时间:2016-03-05 13:36:42

标签: reactjs

我一直在寻找这个问题的答案已经有一段时间了,所以我只想问:

将函数作为第一个参数传递给this.setState时, previousState 是否可变?

From React docs

在文档中声明函数(state,props)可用于更新前一个的状态,但也可以使用这样的函数:

示例:假设state.profiles包含用户配置文件,我们想要更改一个用户配置文件。所以问题是关于状态中的嵌套对象。

// Profiles has this structure:
// {1:{name: 'Old Name', age: 21}, 2: {name: 'Profile 2', age: 12}};

var changedProfile = {id: 1, name: 'New Name', age: 21};
this.setState(function (previousState) {
  previousState.profiles[changedProfile.id] = changedProfile;
  return previousState;
})

这可以吗?可以将previousState.profiles视为可变吗?

当然,替代方案是做这样的事情:

var changedProfile = {id: 1, name: 'New Name', age: 21},
    newProfiles = _.extend({}, this.state.profiles);

newProfiles[chanedProfile.id] = changedProfile;
this.setState({profiles: newProfiles});

但是如果改变 previousState 是好的,那么复制对象然后将状态设置为复制和更改的对象似乎是多余的。

编辑:首先提供一个不好的例子。取而代之的是更好的例子。

1 个答案:

答案 0 :(得分:1)

在您的示例中,您的新状态完全不依赖于之前的状态,因此您可以这样做:

this.setState({
  a: 123;
  b: {x: 'X', y: 'Y'};
})

然而,如果这只是一个不好的例子,并且你确实需要检查以前的状态以确定新状态,那么它将是这样的:

this.setState(function (previousState) {
  return {
    a: previousState.a + 123;
    b: Object.assign(previousState.b, {x: 'X', y: 'Y'});
  }
})

基本上结果是我们返回一个新状态的对象,我们可以使用我们认为合适的先前状态 - 所以是的,你可以像在你的例子中那样改变先前的状态