hooks useState修改对象类型的方式

我们都知道，在react16.8中引入了hooks，至于为什么要引入hooks，hooks的优点大家还是去官网看吧，我们直接进入今天的主题：useState修改对象类型的方式

1. 直接修改式

import React, { useState, useEffect } from "react";
export default function ExampleHook() {
    let [obj, setCount] = useState({ count: 1 });
    const handlerClick = function () {
       	setCount({ count: obj.count + 1 });
    };
    return (
        <div>
            <p>{obj.count}</p>
            <button onClick={() => handlerClick()}>add</button>
        </div>
    );
}

这种方式可以说是我们返回一个以上次obj.count为基础加1，但是这种方法有个弊端，就是在异步方法中，是没法正常显示的，这时我们可以采用回调函数式 2. 回调函数式

import React, { useState, useEffect } from "react";
export default function ExampleHook() {
    let [obj, setCount] = useState({ count: 1 });
    const handlerClick = function () {
        console.log(obj);
        setTimeout(() => {
            setCount((prev) => ({
               count: prev.count + 1,
            }));
        }, 1000);
    };
    return (
        <div>
            <p>{obj.count}</p>
            <button onClick={() => handlerClick()}>add</button>
        </div>
    );
}

通过回调函数式我们就可以正确的访问到上一次的obj.count了