React 父组件传递属性给子组件时，子组件调用该属性时出现的Bug

问题描述：React 父组件传递属性给子组件时，子组件在函数中使用到该属性时(失效), 换言之就算传递属性发生变化，在子组件调用该属性用到的还是第一次传进来的值。

问题代码
IndexContent.jsx

import React, { useState} from 'react';
const IndexContent = ({ uid, talk_type, receiver_id, index_name }) => {
    useEffect(() => {
    	console.log("进入IndexContent",talk_type,receiver_id)
        onLoad({ uid, talk_type, receiver_id, limit: 20 }) //这个onLoad不需要管
    }, [index_name])

    return (
        <>
            <PanelFooter  talk_type={talk_type} receiver_id={receiver_id} name={"测试"}/>
        </>
    )
}
export default IndexContent;

PanelFooter.jsx

import React, { useState } from 'react';
const PanelFooter = ({ talk_type, receiver_id, name }) => {

    useEffect(() => {
        console.log("进入PanelFooter", talk_type, receiver_id)
    }, [talk_type, receiver_id])
    
	const onSendMessage = (data = {}, callBack) => {
        let message = {
            ...data,
            receiver: {
                talk_type: talk_type,
                receiver_id: receiver_id,
            },
        };
        console.log("onSendMessage", message.receiver)
     }
     
	 const evnets = {
        msg_event: onSendMessage 
     }
	return (<><Editor editorEvent={editorEvent} /></>)
}
export default PanelFooter;

第一次进来加载,并且调用 onSendMessage 方法

进入PanelFooter 1 2
进入IndexContent 1 2
onSendMessage {talk_type:1,receiver_id:2}

当前切换会话后，继续调用onSendMessage 方法

进入PanelFooter 2 20
进入IndexContent 2 20
onSendMessage {talk_type:1,receiver_id:2}

• 子组件调用方法里的值没有发生改变

解决办法

PanelFooter.jsx

import React, { useState,useRef } from 'react';

const PanelFooter = ({ talk_type, receiver_id, name }) => {

    // 使用 ref 来存储最新的 talk_type 和 receiver_id
    const talkTypeRef = useRef(talk_type);
    const receiverIdRef = useRef(receiver_id);

    useEffect(() => {
        talkTypeRef.current = talk_type;
        receiverIdRef.current = receiver_id;
    }, [talk_type, receiver_id])
    
	const onSendMessage = (data = {}, callBack) => {
        let message = {
            ...data,
            receiver: {
                talk_type: talkTypeRef.current,
                receiver_id: receiverIdRef.current,
            },
        };
        console.log("onSendMessage", message.receiver)
     }
     
	 const evnets = {
        msg_event: onSendMessage 
     }


	return (<><Editor editorEvent={editorEvent} /></>)
}
export default PanelFooter;