React——class组件中setState修改state

class组件中通过state去存储当前组件的数据，那怎么对其进行修改呢？就是方法this.setState({ 要修改的部分数据 })

setState() 作用：1 、修改 state 内容；2 、更新 UI

特别注意：react的核心其实是虚拟dom（数据），那么我们要尽量避免直接手动 DOM（视图），那当我们在修改state的时候只关心我们的数据，也就是数据驱动视图的核心。

import { Component } from 'react'

class New extends Component {
  state = {
    userInfo: {
      name: '',
      id: ''
    }
  }

  render () {
    return (
      <div>
        <span>用户：{this.state.userInfo.name}</span>
        <button
          onClick={() => {
            // 当作登录按钮，登录后显示用户名字
            this.setState({
              userInfo: {
                name: 'hyy',
                id: '0182310927471'
              }
            })
          }}
        >
          登录
        </button>
      </div>
    )
  }
}

export default New
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33