使用Immutable更新React状态

Question

我正试图通过Immutable更新我的常规React状态,并遇到了一些问题.状态不是深层嵌套的,也不是嵌套在除状态本身之外的任何东西上,例如{ "username" : "keyval" : null}}

这意味着我不能做某些事情username.update('keyval', something),而是我需要另一种方法.这是一个相当容易的问题,我只是不知道该怎么做.这是我的setState的样子,我想做一个不可变的setState动作.

handleUpdatePassword(event) {
    event.persist()
    this.setState(({password}) => ({
      password: state.update('password', event.target.value)
      })
    );
  }

这是我尝试时得到的错误:

   handleUpdatePassword(event) {
        event.persist()
        this.setState({
          password: state.update('password', event.target.value)
          })
      }

此外,这有效,但我收到此错误: this.state.updater is not a function

handleUpdateUsername(event) {
    console.log(this.state)
    event.persist()
    this.setState({
      username: this.state.update('username', event.target.value)
      })
  }

Answer 1

state应该是一个普通的JavaScript对象,您可以在文档中阅读.

请注意,state必须是一个普通的JS对象,而不是一个Immutable集合,因为React的setState API需要一个对象文字并将它(Object.assign)与之前的状态合并.

你的初始状态应该是这样的

constructor(){
     ...
     this.state = {data: Map({ password: "", username: ""})}
}

之后,您将能够像这样更新数据

handleUpdatePassword(event) {
 this.setState(({data}) => ({
      data: data.update('password', password =>  event.target.value)
    }));
}