使用Immutable更新React状态

Question

我试图通过Immutable更新我的常规React状态，并遇到了一些问题。国家没有深层嵌套，或者它没有与州本身以外的任何东西嵌套，例如remove(Object)

这意味着我无法做{ "username" : "keyval" : null}}这样的事情，而是需要另一种方法。这是一个相当容易的问题，我只是不知道该怎么做。这是我的setState的样子，我想做一个不可变的setState动作。

username.update('keyval', something)

这是我在尝试时遇到的错误：

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

Answer 1

state应该是一个简单的JavaScript对象，您可以在documentation中阅读。

  

请注意，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)
    }));
}

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)。