分布在反应的setState中

Question

I saw this in somewhere and I'm confused. I've never do thing this way, what it does actually?

doSomething = index => {
    const tempState = this.state
    tempState.keys.push(index)

    this.setState({
      ...tempState
    })
  }

Answer 1

const tempState = this.state

The above assigns to tempState a reference to the state object

tempState.keys.push(index)

tempState has a property of keys that holds a reference to an array and push is called on the array to add index to the array

this.setState({
  ...tempState
})

this.setState is called and a new copy of the state is passed into setState . The spread operator is basically copying the content of the old state into a new object.

Answer 2

The above implementation isn't the perfect one and should be improved so that you aren't mutating the original state object.

doSomething = index => {
    const tempState = this.state  // assing reference of state to tempState
    tempState.keys.push(index) // push a value to `keys` property value within state. Note that Javascript object assignment works by reference and hence this will actually mutate the state object

    this.setState({ 
      ...tempState
    }) // call setState to update state and pass the cloned version of tempState using spread syntax as the new state values
  }

Although the above implementation clones the value before setState, its incorrect since it should clone the value before any update is made into it

doSomething = index => {
    const keys = [...this.state.keys]
    keys.push(index)

    this.setState({
      keys
    })
  }

However since you use ES5, in order to clone the value, you can make use of concat to update the keys array using functional setState like

doSomething = index => {

    this.setState(prevState => ({
      keys: prevState.keys.concat([index])
    }))
  }

I hope the above answer provides an insight into the explanation that you were looking for