react父子组件的问题

Question

PageA中的代码

import React, { useState } from 'react'
import PageB from '../PageB'
export default function PageA() {
    const [flag, setFlag] = useState(false)
    const changeFlag = (val: boolean) => {
        setFlag(val)
        test()
    }
    const test = () => {
        if (flag) {
            console.log('flag是true');

        } else {
            console.log('flag是false');
        }
    }
    return (
        <div>
            <h4>pageA</h4>
            <hr />
            <PageB changeFlag={changeFlag}></PageB>
        </div>
    )
}

PageB中的代码

import React from 'react'

export default function PageB({ changeFlag }: { changeFlag: (val: boolean) => void }) {

  return (
    <div>
      <h4>pageB</h4>
      <button onClick={() => changeFlag(true)}>点击</button>
    </div>
  )
}

打印结果：

我想子组件改变父组件的状态值，并且在函数中能拿到及时更新的状态，应该怎么做？

Answer 1

解决了吗