React记忆卡牌游戏问题：点击卡牌控制台输出SyntheticBaseEvent而非卡牌名

问题1：点击卡牌输出SyntheticBaseEvent而非卡牌信息 #

原因：SingleCard组件中，onClick触发handleClick时，默认会传递事件对象作为参数，你定义handleClick(card)时，这个card参数会被事件对象覆盖，导致传递给handleChoice的是事件而非卡牌数据。

修改方案：
修改SingleCard.js中的handleClick函数，直接使用组件接收的card属性，不要给handleClick设置参数：

const SingleCard = ({ card, handleChoice }) => {
    const handleClick = () =>{
        handleChoice(card)
    }
    return (
        <div className='card'>
            <div>
                <img className='front' src={card.src} alt="card front" />
                <img className='back' src="assets/img/cover.png" onClick={handleClick} alt="card back" />
            </div>
        </div>
    )
}

修改后点击卡牌，控制台就能正确输出当前卡牌的对象信息。

问题2：App函数中的console.log打印两次 #

原因：这是React开发环境下StrictMode的默认行为。StrictMode会在开发模式下重复调用组件函数两次，用来检测组件中是否存在不安全的副作用（比如未清理的定时器、重复订阅等），帮助开发者提前发现问题。生产环境中不会出现这个现象。

如果想在开发环境中关闭该行为，可以找到项目根目录下的index.js（或main.jsx，取决于React版本），移除<React.StrictMode>标签的包裹：
修改前：

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

修改后：

ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
);

不过建议保留StrictMode，它能有效帮助你在开发阶段排查潜在问题。

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