React实现按钮单选时onClick函数报变量未定义该如何修复？

架构老林

2026-9-27

问题解决方案

错误根源

引用类型等值判断逻辑错误：JS中数组属于引用类型，[] === []永远返回false，你的首个if分支永远不会触发，所有请求直接进入else分支，才会出现空数组取索引的未定义报错。
全局变量存储组件状态不合理：last_select定义在组件外部属于全局共享变量，多组件实例会互相干扰，且React重渲染不会监听该变量变化，极易出现状态不同步问题。
你的需求不需要使用useEffect或者bind方法，问题出在基础语法判断和状态存储方式错误，和这两个API无关。

修复代码

将全局的last_select替换为组件内部的useState状态，同时修正数组判断逻辑：

import { useState } from 'react'

export default function Grid() {
  // 用组件状态存储最后选中的坐标，初始值用null更方便判断
  const [lastSelect, setLastSelect] = useState(null)

  function Selection(x, y){
    // 无选中项的分支
    if (lastSelect === null) {
      if (board[x][y][0] !== "" && board[x][y][0][0] === 'W'){
        boardSetHooks[x][y]([board[x][y][0], true])
        setLastSelect([x, y])
        return
      }
    }
    else {
      const [lastX, lastY] = lastSelect
      // 点击已选中项，取消选中
      if (lastX === x && lastY === y) {
        boardSetHooks[x][y]([board[x][y][0], false])
        setLastSelect(null)
        return
      }
      // 切换选中项
      else {
        boardSetHooks[lastX][lastY]([board[lastX][lastY][0], false])
        boardSetHooks[x][y]([board[x][y][0], true])
        setLastSelect([x, y])
        return
      }
    }
  }
  // 其余组件原有逻辑...
}