React函数传Prop报错：TypeError: handleGameSelection不是函数

核心问题1：错误的document引用导致组件渲染异常 #

你的子组件中使用了document.cards，但这里的document是浏览器全局的DOM对象，它并没有cards属性。这个错误会导致组件渲染过程中抛出异常，可能间接让handleGameSelection prop无法正常传递，也会让你混淆实际的错误来源。

核心问题2：gameMode初始值类型不匹配 #

gameMode初始值设为空字符串''，但react-select的onChange回调返回的是选项对象（比如{value: 'xxx', label: 'xxx'}）。当用户未选择游戏模式就提交表单时，访问gameMode.value会抛出Cannot read properties of string (reading 'value')的错误，这个错误被catch块捕获，但你可能误以为是handleGameSelection的问题。

修复步骤 #

1. 修正数据源引用

假设你的卡片数据是从父组件传递的，修改父组件传递cards prop：

// 父组件Game.jsx
export default function Game() {
  // 替换为你的实际卡片数据
  const cards = [/* 示例：{label: '卡牌1', ...其他属性} */];
  
  const [gameStarted, setGameStarted] = useState(false)
  const [gameSettings, setGameSettings] = useState({})

  useEffect(() => {
    // setGameStarted(true);
  }, [gameSettings])
    
  return (
    <>
      {!gameStarted && 
        <div className="game-form">
          <GameSelection 
            handleGameSelection={(settings)=> setGameSettings(settings)}
            cards={cards} {/* 传递卡片数据给子组件 */}
          />
        </div>}
    </>
  )
}

子组件接收cards prop并替换原错误的document引用：

// 子组件GameSelection.jsx
export default function GameSelection({handleGameSelection, cards}) {
  const [labels, setLabels] = useState([])
  const [gameMode, setGameMode] = useState(null) // 改为null，匹配react-select返回的对象类型
  const [selectedLabels, setSelectedLabels] = useState([])
  const [formError, setFormError] = useState(null)

  useEffect(() => {
    if(cards?.length) { // 先检查cards是否存在且有数据
      setLabels(cards.map(card => {
        return { value: {...card}, label: card.label}
      }))
    }
  }, [cards]) // 依赖项改为传入的cards

  // ... 其他代码
}

2. 修复表单提交时的类型错误

在handleSubmit中添加前置检查，避免访问未定义的属性，同时确保handleGameSelection是函数再调用：

const handleSubmit = (e) => {
  e.preventDefault()
  setFormError(null)

  // 校验必填项
  if(!gameMode || selectedLabels.length === 0) {
    setFormError('请选择游戏模式和标签')
    return
  }

  try{
    const gameSettings = {
      mode: gameMode.value,
      selected: selectedLabels.map((card) => ({...card.value})),
    }
    // 确保函数存在再调用，避免类型错误
    typeof handleGameSelection === 'function' && handleGameSelection(gameSettings)
  }
  catch(error){
    console.error('提交错误:', error)
    setFormError('表单提交失败，请检查输入')
  }
}

3. 可选：给react-select设置默认值

如果需要默认选中某个选项，可以给Select组件添加defaultValue：

<Select
  onChange={(option) => setGameMode(option)}
  options={gameModes}
  defaultValue={gameModes[0]} // 默认选中第一个游戏模式
/>

额外提示 #

• 不要用全局document对象存储业务数据，应该通过props或状态管理工具（如Context、Redux）传递数据。
• 可以给组件添加类型检查（比如PropTypes或TypeScript），提前发现参数类型错误。

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