react useContext()如何子组件实时动态向父组件传参？

Question

父组件调用子组件，子组件内完成内容初始化后需要将一个默认值传递到父组件，最后在父组件表单提交中要用到子组件传过来的这个值
使用useContext()，创建了单独的存放createContext()的文件AppContext.tsx，

    import React from 'react';

    let defaultValue = {
        url:''
    }
    const AppContext = React.createContext(defaultValue);
    export default AppContext;

子组件b.tsx引入

    import React, {useState, useEffect} from 'react';
    import AppContext from './AppContext.tsx';

    const b = () => {
        const [url,getUrl] = useState(String);
        useEffect(() => {
            b1();
        },[])
        const b1 = () => {
            gerUrl('url');
        }
        return (
            <AppContext.Provider value={{'url' : url}}>
                <div>{url}</div>
            </AppContext.Provider>
        )
    }

    export default b;

父组件a.tsx

    import React, {useContext} from 'react';
    import B from 'b.tsx';
    import AppContext from 'AppContext.tsx';

    const a = () => {
        const getContext = useContext(AppContext) //这么写感觉有问题，但看不出问题在哪

        const fun1 = () => {
            console.log(getConstext); // 组件的时间不管是onClick还是onChange貌似都不起作用
        }
        return (
            <div>
                <B onClick={fun1}/>    
            </div>
        )
    }

现在有几个问题：
1、子组件里更新后我不知道父组件里该如何接收；
2、父组件a里通过useEffect打印getContext.url一直是空值，不确定是写法问题导致的还是useContext不能实时更新数据导致的

Answer 1

你写反了，Provider用在父组件，子组件用useContext