React 中 setState的两种写法、修改部分属性

前言

通常在React 类组件中要更新视图，只能通过setState去更新，这篇主要是总结一下setState的用法

setState(updater, [callback])

• updater：可以为对象或者是函数
• callback：可选的回调函数，用于setState设置state的属性值成功之后的回调

1、两种调用方式

第一种：对象方式

this.setState({ val: this.state.val + 1 });

第二种 ：函数方式

this.setState((state) => {
  return {
    val: state.val + 1,
  };
});

2、修改状态后依据状态进行操作

第一种：回调函数

this.setState({ val: this.state.val + 1 }, () => {
  console.log(this.state.val);
});

第二种：async / await

changeVal = async () => {
  await this.setState({
    val: this.state.val + 1,
  });
  console.log(this.state.val);
};

3、修改某个对象的部分属性，使用Object.assign()

import React, { Component } from "react";

export default class example17 extends React.Component<{}, { val: number; obj: { name: string; age: number; sex: string } }> {
  state = {
    val: 0,
    obj: {
      name: "张三",
      age: 19,
      sex: "男",
    },
  };

  changeVal = () => {
    this.setState((state) => {
      return {
        obj: Object.assign(state.obj, { name: "李四" }),
      };
    });
  };

  render() {
    return (
      <>
        <div>{this.state.val}</div>
        <div>{JSON.stringify(this.state.obj)}</div>
        <button onClick={this.changeVal}>点我更换对象</button>
      </>
    );
  }
}

总结

这里仅是介绍了setState简单的使用的。关于setState是不是异步的问题，可以去看这位大佬的解释。

• 你真的理解setState吗？