正确的方法从反应状态中删除键

Question

我正在使用react(v0.14)视图的状态来保存未保存的用户ID和用户对象的键值对.例如:

onChange = (user, field) => {
  return (event) => {
    let newUser = _.clone(this.state[user.uuid] || user);
    _.assign(newUser, {[field]: event.target.value});
    this.setState({
      [user.uuid]: newUser
    });
  }
}

render() {
   let usersJsx = users.map((user, i) => {
     return <div key={i}>
       <input type="text" value={user.name}
         onChange={this.onChange(user, 'name')}/>
     </div>;
   });

   let numberUnsavedUsers = _.keys(this.state).length;

   // ... etc
}

这一切都完美无缺,直到我来到save方法:

persistUsers = (event) => {

  let unsavedUsers = _.toArray(this.state);
  updateUsers(unsavedUsers, {
    onSuccessCb: (savedUsers) => {

      // Would prefer to remove these two lines and replace
      // with `this.setState({});` but this doesn't work... i.e.
      // the state is left untouched rather than being
      // replaced with `{}`.  This makes sense.  I guess I was hoping
      // someone might point me towards a this.replaceState()
      // alternative.
      this.setState({nothing: true}); // triggers a state change event.
      this.state = {};  // wipes out the state.
    }    
  });
}

我搜索过但只发现修改嵌套对象或数组的人而不是顶级键值.

Answer 1

你需要使用replaceState而不是setState

更新: 不推荐使用replaceState.您应该遵循建议并使用setState空值.

建议:

您应该命名数据并使用,setState这样您就可以更轻松地使用它.

代替:

//bad
this.setState({
  [user.uuid]: newUser
});

使用:

//good
this.setState({
 newUser: {uuid: user.uuid}
})

如果你的状态{unsavedUsers: {userData}}不是{userData}那么你可以很容易地setState({unsavedUsers: {}})不介绍replaceState.

replaceState是一种反模式,因为它不常用.

原答案:

喜欢setState()但删除任何不在newState对象中的预先存在的状态键.

文档

this.replaceState({}) 将删除所有对象.