javascript - Updating React state with Immutable - Stack Overflow

admin管理员组

文章数量:1389858

I'm trying to update my regular React state through Immutable, and got into some few issues. The state isn't deeply nested or it isn't nested from anything other than the state itself, such as { "username" : "keyval" : null}}

This means I could not do something such as username.update('keyval', something), instead I need another approach. Its a rather easy question, I just don't know how to do it. Here's how my setState looks like, which I want to make an Immutable setState action.

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

And here is the error I get when trying:

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

Also, This works, but I get this error: 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)
      })
  }

I'm trying to update my regular React state through Immutable, and got into some few issues. The state isn't deeply nested or it isn't nested from anything other than the state itself, such as { "username" : "keyval" : null}}

This means I could not do something such as username.update('keyval', something), instead I need another approach. Its a rather easy question, I just don't know how to do it. Here's how my setState looks like, which I want to make an Immutable setState action.

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

And here is the error I get when trying:

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

Also, This works, but I get this error: 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)
      })
  }

• javascript
• reactjs
• redux
• immutable.js

Share Improve this question Follow edited Jul 8, 2016 at 10:29 Even Stensberg asked Jul 8, 2016 at 10:06 Even StensbergEven Stensberg 50866 silver badges1717 bronze badges 16

• FWIW, I´ve looked into this as well, link but it is misleading, as most of the state isn't dested for basic ponents. – Even Stensberg Commented Jul 8, 2016 at 10:15
• I think this.state should be Immutable.Map – Tamas Hegedus Commented Jul 8, 2016 at 10:43
• It is, declared before. Was kinda obvious :p – Even Stensberg Commented Jul 8, 2016 at 10:46
• It looked like you had a simple JS object. Then look at this: this.state.updater is not a fucntion why updater? Why not update? And this sentence lso, This works, but I get this error: this.state.updater is not a function makes no sense. It either works or throws. – Tamas Hegedus Commented Jul 8, 2016 at 10:49
• funny, cause if I use this.state.set(...) it renders once, and on second keystroke it throws. I can see my state being updated too – Even Stensberg Commented Jul 8, 2016 at 10:50

 |  Show 11 more ments

2 Answers 2

Sorted by: Reset to default 6

state should be a plain JavaScript object as you can read in the documentation.

Note that state must be a plain JS object, and not an Immutable collection, because React's setState API expects an object literal and will merge it (Object.assign) with the previous state.

Your initial state should look something like this

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

After that, you'll be able to update the data like this

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

You are creating explicit objects. Just let ImmutableJS do it for you.

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));
  }
}

EDIT

ImmutableMap.update(key, updater) uses a callback to set the value, you want ImmutableMap.set(key, newValue) here.

本文标签： javascriptUpdating React state with ImmutableStack Overflow