CODEWITHSUNDEEP
javascriptreactjs
Toby
Toby

Reputation: 13395

Calling setState with nested object does not update state correctly

I have a React component that maintains state for several child components. Via componentDidMount() I am calling this function in the parent component from the child components:

change = (fieldset, field, data) => {
  this.setState({
    [fieldset]: {
      ...this.state[fieldset],
      [field]: data,
    }
  })
}

Think form/fieldset/field for the usage pattern, but with fields calling the above function.

The problem I'm having is that I believe I'm confusing React by calling this function so many times in quick succession, because state is not updated for all but one or two items.

I've tried using Object.assign() to avoid mutating state, but for the most part state has not updated correctly even at the point where I begin to read current start.

Is this against React best practices? Is there a better way for child components to call setState in a parent component?

Upvotes: 4

Views: 642

Answers (1)

Yury Tarabanko
Yury Tarabanko

Reputation: 45106

Since the way you update the state depends on the state itself you need to use a function instead of an object.

change = (fieldset, field, data) => {
  this.setState(prevState => ({
    [fieldset]: {
      ...prevState[fieldset],
      [field]: data,
    }
  }))
}

Functions will be applied one after another. So you wont override any pending changes.

From docs

this.setState({quantity: this.state.quantity + 1})

this.setState({quantity: this.state.quantity + 1})

Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the previous state, we recommend using the updater function form, instead.

Upvotes: 2

Related Questions