react中setState()的使用

我们知道，react中不能直接修改state，需要通过setState()进行修改。

最近项目中遇到一个问题，state中维护了一个数组，数组的元素为一个对象，对象中的某个属性需要通过后端接口获取，然后render。

解决此问题之前，先来了解下setState()的几种使用方式。

第一种方式：setState(stateChange[, callback])

面试中经常遇到如下一个问题：

this.state = {
    value: 1
}
...
handlerFunction () {
    this.setState({
        value: 2
    })
}
console.log(this.state.value)  // 1

常用的解决方法有几种：

方法一：

handlerFunction () {
    this.setState({
        value: 2
    }, () => {
        console.log(this.state.value)  // 2
    })
}

方法二：

async handlerFunction () {
    await this.setState({
        value: 2
    })
    console.log(this.state.value)  // 2
}

方法三：

handlerFunction () {
    this.setState(prevState => {
        return {value: 2}
    })
}
console.log(this.state.value)  // 2

主要介绍下方法三中的使用：

setState(updater[, callback])

其中updater函数为：

(state, props) => stateChange

第一个参数表示前一个状态的值（最新），第二个参数表示从父组建接收的属性。两个参数都为可选

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

回到文章开头提到的那个问题，通过方法三这种方式即可解决

this.setState((prevState) => {
  let temp = {
    ...prevState,
    genres: [...prevState.genres]
  }

  temp.genres[0].name = 'change name'

  return temp
})