React useContext传递状态可打印但无法读取对象属性问题

核心问题是对象属性访问的语法错误：当你用变量作为键读取对象属性时，不能用点.语法，必须用方括号[]语法。点语法只能识别固定的字面量属性名，无法解析变量的实际值。

修复步骤 #

1. 修正属性访问方式
   把 nudges.lastPratique 改成 nudges[lastPratique]。方括号会先解析lastPratique的实际值（比如B1_logique），再去nudges对象中查找对应键的值。

2. 处理初始状态的边界情况
   如果lastPratique初始值为undefined或空字符串，组件挂载初期会触发Cannot read properties of undefined错误，可以加个条件判断避免：

   const currentNudge = lastPratique ? nudges[lastPratique] : "默认提示内容";
   

3. 校验键名匹配度
   确认lastPratique的取值和nudges对象中的键名完全一致，比如大小写、下划线、拼写都不能错——B1_logique和b1_logique会被视为两个不同的键。

为什么用ref没解决问题 #

你用lastPratiqueRef传递值的思路没问题，但问题根源是属性访问语法错误，和值的存储方式无关。就算用ref存值，读取时也要用方括号：nudges[lastPratiqueRef.current]，点语法依然无效。

示例代码 #

import { useContext } from 'react';
import { LastPratiqueContext } from './AppLayout';

const GrilleExercices = () => {
  const lastPratique = useContext(LastPratiqueContext);
  
  const nudges = {
    B1_logique: "这是B1逻辑模块的提示",
    A2_grammaire: "这是A2语法模块的提示"
    // 其他键值对
  };

  // 正确取值
  const currentNudge = lastPratique && nudges[lastPratique];

  console.log(lastPratique); // 输出B1_logique
  console.log(currentNudge); // 输出对应提示内容

  return <div>{currentNudge || "暂无提示"}</div>;
};

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