使用不可变更新React状态

Question

我正在尝试通过Immutable更新我的常规React状态，并遇到了一些问题。 该状态没有深度嵌套，也没有从状态本身之外的其他任何嵌套，例如{ "username" : "keyval" : null}}

这意味着我不能做诸如username.update('keyval', something) ，相反，我需要另一种方法。 这是一个相当简单的问题，我只是不知道该怎么做。 这是我要执行Immutable 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对象，您可以在文档中阅读。

请注意，状态必须是普通的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)
    }));
}

Answer 2

您正在创建显式对象。 只需让ImmutableJS为您完成。

class YourReactComp extends React.Component {
  constructor() {
    this.state = Immutable.Map({"username": ""});
  }
  handleUpdateUsername(event) {
    console.log(this.state)
    event.persist()
    this.setState(this.state.set("username", event.target.value));
  }
}

编辑

ImmutableMap.update(key, updater)使用回调设置值，您需要在此处使用ImmutableMap.set(key, newValue) 。