React开发中从孙组件调用父函数访问父state返回undefined求助

• 核心原因是变量名冲突：你在_populateTile函数内部定义了和父组件state同名的局部变量board，根据JS变量提升规则，const board的声明会被提升到当前函数作用域顶部，但初始化逻辑不会提升，你在if (board[index] !== EMPTY)行访问的是尚未完成初始化的局部board，自然返回undefined，根本没有读取到外层的state值。
• 排除变量名冲突后如果仍有问题，就是经典的React闭包陷阱：你在useEffect中调用的_populateTile是旧闭包捕获的版本，state更新后函数没有重新生成，内部捕获的还是旧的board值，也可能出现不符合预期的返回结果。你提到的空依赖useEffect可以正常访问board，是因为空依赖的useEffect仅在组件首次渲染执行，此时你未调用冲突函数，直接访问的是初始状态的board，调用函数后触发变量名冲突才会出现undefined。

1 修复变量名冲突 #

把_populateTile内部的局部变量改名，避免和外层state重名即可解决绝大部分场景的问题：

const _populateTile = (index, figure, onFinish = f => f) => {
  // 此时访问的是外层state的board，无局部变量冲突
  if (board[index] !== EMPTY) {
    return;
  }

  // 局部变量改名，避免命名冲突
  const newBoard = [...board];
  newBoard[index] = figure;

  setBoard(newBoard);

  const result = _judgeWinner();
  if (result !== null) {
    props.onFinish(result);
  }
  onFinish();
};

2 彻底规避闭包问题（更稳定的写法） #

如果想完全不依赖外层的board变量，避免后续再出现闭包旧值问题，可以把逻辑放到setState的函数式更新回调中，回调拿到的永远是最新的state值：

const _populateTile = (index, figure, onFinish = f => f) => {
  setBoard(prevBoard => {
    // prevBoard永远是最新的state，不受闭包影响
    if (prevBoard[index] !== EMPTY) {
      return prevBoard; // 不需要更新时直接返回原state
    }
    const newBoard = [...prevBoard];
    newBoard[index] = figure;

    // 如果_judgeWinner依赖board，这里传入newBoard即可拿到最新值
    const result = _judgeWinner(newBoard);
    if (result !== null) {
      props.onFinish(result);
    }
    setTimeout(onFinish, 0); // 放到下一个事件循环执行，确保state更新完成
    return newBoard;
  })
};

3 处理useEffect和子组件传参的闭包问题 #

• 如果你需要在useEffect里调用_populateTile，请把_populateTile用useCallback包裹，把相关依赖加到useCallback的依赖数组中，同时把该函数加到useEffect的依赖数组中。
• 如果你把_handlePress传给子组件，也建议用useCallback包裹，减少子组件不必要的重渲染：

const _handlePress = useCallback((index) => {
  _populateTile(index, PLAYER_FIGURE, () => _AIAct());
}, [_populateTile]);

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