React组件中onClick更新状态出错，点击方块变色功能异常求助

你的代码存在几个核心问题，直接导致了state更新报错和功能失效，以下是问题点和修复方案：

问题点 #

• State类型被错误篡改：初始squares是数组类型（来自boxes.js的数组），但changeOn函数里用setSquares({id:1, on:false})把它改成了单个对象，后续执行squares.map时会报错——对象没有map方法。
• 无法定位点击目标：点击事件没有传递当前方块的ID，无法精准修改对应方块的状态。
• State更新方式不规范：依赖旧state更新时，没有使用React推荐的函数式更新写法，容易出现异步更新导致的状态不一致。
• 无效CSS属性值：Box.js里backgroundColor: "none"是无效值，浏览器无法识别，应改为transparent或具体颜色值。

修复后的代码 #

App.js #

import React from "react"
import boxes from "./boxes"
import Box from "./Box"

export default function App() {
    const [squares, setSquares] = React.useState(boxes)
    
    // 接收点击方块的ID，精准修改对应状态
    function changeOn(boxId) {
        // 函数式更新，基于旧state生成新数组
        setSquares(prevSquares => {
            return prevSquares.map(box => {
                return box.id === boxId ? {...box, on: !box.on} : box
            })
        })
    }

    const squaresElement = squares.map(box => (
        // 点击时传递当前方块的ID
        <Box key={box.id} on={box.on} onClick={() => changeOn(box.id)} />
    ))

    return (
        <main>
            {squaresElement}
        </main>
    )
}

Box.js #

import React from "react"

export default function Box (props) {
    // 修正无效的背景色值为transparent
    const styles= props.on ? {backgroundColor: "#222222"} : {backgroundColor: "transparent"}

    return (
        <div className="box" style={styles} onClick={props.onClick}></div>
    )
}

修复说明 #

1. 给点击事件传递当前方块ID，确保能精准找到需要修改的目标；
2. 使用函数式更新setSquares(prev => ...)，基于旧state生成新数组，只修改目标方块的on状态，保持数组结构不变；
3. 修正CSS属性值，确保背景色切换生效。

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