react hooks useState更新值不及時的解決方案

react hooks中useState更新值后經常會出現值更新不及時的bug，可以使用以下思路解決

import React, { Component, useState } from 'react'
import ReactDom, { render } from 'react-dom'

const Hooks = () => {
    const [num, set_num] = useState(0)
    const [age, set_age] = useState(0)
    const add_age = () => {
        set_age((data) => {
            let new_data = data + 1
            set_num_handle(new_data)
            return new_data
        })   //使用函數，而不是固定值，將最新值傳給要處理的函數，並返回給這個設置值的函數

    }
    const set_num_handle = (new_data) => {
        set_num(new_data)
    }
    return (<div>
        <div>
            年齡:{age}
        </div>
        <div><button onClick={add_age}>設置{num}</button></div>
    </div>)
}

ReactDom.render(<Hooks />, document.querySelector('#root'))

總結:上面的思路就是const [state,setState]=useState(0),使用setState()這個函數賦值的時候，不是傳入一個固定的值，而是使用setState((data)=>{let new_data=data+1;return new_data})得到最新的值，函數中的data是當前等待處理的值