React传递setCookie函数报错：Uncaught TypeError: 无法读取undefined的setCookie属性

错误根源 #

你调用handleMultiplayerClick时直接传入了setCookie函数，但在handleMultiplayerClick中错误地将参数当成包含setCookie属性的对象来访问。此时参数本身就是setCookie函数，并非对象，所以props.setCookie等价于undefined.setCookie，触发了Cannot read properties of undefined (reading 'setCookie')的类型错误。

修复方案 #

有两种简单的修复方式，选其一即可：

方案1：直接接收函数参数（推荐）

修改handleMultiplayerClick，直接把传入的参数当作setCookie函数使用：

const handleMultiplayerClick = (setCookie) => {
  promptUserCookie();
  let cookie = parseUserCookie(setCookie); // 直接使用传入的setCookie函数
  // ...后续逻辑
}

调用代码无需改动，保持原有的handleMultiplayerClick(setCookie)即可。

方案2：以对象形式传递参数

如果需要保持props.setCookie的访问方式，调用时传入包含setCookie属性的对象：

<button onClick={() => handleMultiplayerClick({ setCookie })}>

这样handleMultiplayerClick中的props.setCookie就能正确获取到目标函数。

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