React中如何通过Context从子组件更新父组件函数？

你遇到的核心问题是闭包陷阱：子组件里的updated_function在首次渲染时被创建，它捕获了当时list_of_list的初始值（["data_1","data_2"]）。哪怕之后子组件的列表状态更新了，这个旧函数里的list_of_list还是停留在初始值——闭包会牢牢记住函数创建时的变量环境。而父组件的function_状态只在子组件的空依赖useEffect里更新过一次，指向的就是这个旧的updated_function，所以父组件点击按钮调用function_时，自然看不到最新的列表内容。

下面给你两种可行的修复方案：

方案一：用useRef保存最新的列表状态 #

通过useRef存储list_of_list的实时值，让updated_function每次执行时都能读取到最新的列表，彻底避开闭包的限制。

修改子组件List_of_list的代码：

import React , { useState , useEffect, useContext, useRef } from 'react';
import Fin_states from './Financial_instrument_states'

export default function List_of_list(props) {
 const [list_of_list,set_list_of_list]= useState(["data_1","data_2"]);
 // 用ref同步保存最新的列表状态
 const listRef = useRef(list_of_list);
 const context = useContext(Fin_states);

 // 每次列表更新时，同步更新ref的值
 useEffect(() => {
   listRef.current = list_of_list;
 }, [list_of_list]);

 const updated_function=(data)=>{
   // 从ref中读取最新的列表
   const new_item = [...listRef.current, data];
   set_list_of_list(new_item);
   console.log(new_item); // 现在能打印最新的列表了
 }

 useEffect(() => {
   // 将更新后的函数传递给父组件
   context.update_function(() => updated_function);
 }, [])

 // 去掉多余的Consumer，已经用useContext获取上下文了
 return (
   <button onClick={() => updated_function("data")}> Add item in child </button>
 );
}

方案二：使用函数式更新（更简洁） #

直接在set_list_of_list里用函数式更新，让React自动传入最新的状态值，不需要依赖外部变量，从根源上避免闭包问题。

修改子组件的updated_function：

const updated_function=(data)=>{
  // 用函数式更新，React会传入当前最新的列表状态
  set_list_of_list(prevList => {
    const newList = [...prevList, data];
    console.log(newList);
    return newList;
  });
}

这种方式下，哪怕updated_function是闭包捕获的旧版本，执行时也能通过prevList拿到最新的列表状态。如果需要确保父组件的function_始终指向最新的函数，可以用useCallback包裹updated_function，并更新useEffect的依赖：

import React , { useState , useEffect, useContext, useCallback } from 'react';
import Fin_states from './Financial_instrument_states'

export default function List_of_list(props) {
 const [list_of_list,set_list_of_list]= useState(["data_1","data_2"]);
 const context = useContext(Fin_states);

 // 用useCallback缓存函数，避免不必要的重创建
 const updated_function = useCallback((data) => {
   set_list_of_list(prevList => {
     const newList = [...prevList, data];
     console.log(newList);
     return newList;
   });
 }, []);

 useEffect(() => {
   context.update_function(updated_function);
 }, [updated_function, context.update_function])

 return (
   <button onClick={() => updated_function("data")}> Add item in child </button>
 );
}

额外优化建议 #

• 父组件的function_初始值可以简化：const [function_, set_function_] = useState((data) => console.log(data)); 不需要嵌套箭头函数。
• 子组件里的Fin_states.Consumer完全可以去掉，因为已经通过useContext获取了上下文，重复使用属于冗余代码。

内容的提问来源于stack exchange，提问作者want_code_that