React使用useState触发点击事件修改状态报item undefined如何解决

• 核心错误：handleTurn 方法中 map 的回调函数没有返回值。Array.prototype.map 会根据回调的返回值生成新数组，你当前的写法回调无返回，执行后会得到一个全是 undefined 的数组覆盖原有状态，后续 CardItem 遍历这个全是 undefined 的数组时，访问 item.id 自然触发属性读取报错。
• 次要问题：你直接修改了原状态对象的属性 item.backsideVisible = !item.backsideVisible，不符合 React 状态不可变更新的原则，可能导致后续视图无法正常触发更新。另外初始状态的对象定义中 backsideVisible: false 后面漏了逗号，存在语法错误。

修改 Container.js 中的 handleTurn 方法，补全 map 的返回逻辑，同时采用不可变方式更新状态：

function handleTurn(event, itemId) {
    event.preventDefault();
    // 用函数式更新避免状态闭包问题，更稳妥
    setItem(prevItems => prevItems.map(item => {
        if(item.id === itemId) {
            // 匹配的项返回新对象，翻转展示状态
            return {
                ...item,
                backsideVisible: !item.backsideVisible
            }
        }
        // 不匹配的项直接返回原对象
        return item;
    }))
}

同时修正初始状态的语法错误，补全属性之间的逗号：

const [item, setItem] = useState([{
    title: "some product title",
    price: "14.99$",
    backsideVisible: false,
    id: 1
}]);

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