setState 是同步还是异步的？

1. setTimeout 中进行 setState

setTimeout(() => {
  this.setState({
    counter: this.state.counter + 1
  })
  console.log(this.state)
}, 0)

2. 原生监听 click 中进行 setState

this.btns.current.addEventListener('click', () => {
  console.log('btn被点击了')
  this.setState({
    counter: 100
  })
  console.log(this.state)
})

setState 的数据合并

// 原数据是
state = {
  message: 'React',
  names: 'Vue'
}

setState({
  message: 'hello world'
})

// 进行使用后，state的数据是
state ->
{
  message: 'hello world',
  names: 'Vue'
}

// 原因是React 内部使用的是 Object.assign({},this.state,{message: 'hello world'})
// 会将this.state中的数据进行覆盖
const start ={
    name:'nihao',
    age:19
};
const end = {age:20};
Object.assign({},start,end)
// {name: 'nihao', age: 20}

setState 本身的合并

如果点击时，调用了多次 setState，最后也只会进行调用一次:

add = () => {
  this.setState({
    counter: this.state.counter + 1
  })
  this.setState({
    counter: this.state.counter + 1
  })
  this.setState({
    counter: this.state.counter + 1
  })
}

// 最终 state中的counter只会增加一次

动态设置对象名-计算属性名

// 例1
handleChange = (event) => {
  this.setState({
    [event.target.name]: event.target.value
  })
}

// 例2
let tempObj = {}
for (let index = 0; index <= 19; index++) {
  // 使用eval 动态生成对象的key
  // eval(`
  // tempObj.id${index + 1}='${sheetData[index + i][0] !== undefined ? sheetData[index + i][0] : '没有数据'}';
  // tempObj.name${index + 1}='${sheetData[index + i][1] !== undefined ? sheetData[index + i][1] : '没有数据'}';
  // tempObj.addr${index + 1}='${sheetData[index + i][2] !== undefined ? sheetData[index + i][2] : '没有数据'}';
  // tempObj.price${index + 1}='${sheetData[index + i][3] !== undefined ? sheetData[index + i][3] : '没有数据'}';
  // `)

  // 使用ES6 计算属性名 动态生成对象的key并进行赋值
  const data = {
    [`id${index + 1}`]: `${
      sheetData[index + i][0] !== undefined
        ? sheetData[index + i][0]
        : '没有数据'
    }`,
    [`name${index + 1}`]: `${
      sheetData[index + i][1] !== undefined
        ? sheetData[index + i][1]
        : '没有数据'
    }`,
    [`addr${index + 1}`]: `${
      sheetData[index + i][2] !== undefined
        ? sheetData[index + i][2]
        : '没有数据'
    }`,
    [`price${index + 1}`]: `${
      sheetData[index + i][3] !== undefined
        ? sheetData[index + i][3]
        : '没有数据'
    }`
  }
  // 使用 assign 将两个对象合并
  Object.assign(tempObj, data)
}