使用 useState 触发事件时如何更改状态？

Question

为了学习 React，我正在尝试实现一个基本的商店。

我的想法是有很多产品图片。如果用户点击产品图片，该图片会翻转并显示产品的评论、评级等内容。

对于这个问题，我有 3 个 js 文件： Container.js（包含从产品卡到导航栏等的所有内容）， ProductList.js（returns UL 与所有不同的产品）和 ItemCard.js（returns 实际产品作为 LI）。

我的目标是反转 backsideVisible 值。

为了更好地理解，我提供了一个最小的例子：

Container.js:

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

    function handleTurn(event, itemId) {
        //here i want to change the backsideVisible value
        event.preventDefault();
        setItem(item.map(item => {
            if(item.id === itemId) {
                item.backsideVisible = !item.backsideVisible;
            }
        }))
    }

    return(
        <ProductList items={item} handleTurn={handleTurn}/>
    );
}

ProductList.js:

function ProductList(props) {
    return(
        <ul>
            <CardItem items={props.items} handleTurn={props.handleTurn} />
        </ul>
    );
}

CardItem.js

function CardItem(props) {
    return(
        {props.items.map(item =>(
            <li key={item.id} onClick={event => props.handleTurn(event, item.id)}>
                product-image etc...
            </li>
        ))}
        
    );
}

但每次尝试此操作时，我都会收到“TypeError：无法访问属性“id”，项目未定义”错误。一旦我将 handleTurn 方法更改为

function handleTurn(event, itemId) {
    event.preventDefault();
    console.log(itemId);
}

一切正常，控制台显示被点击项目的 ID。所以对我来说，我的 handleTurn 函数似乎有一些错误。

你们知道我的错在哪里吗？

非常感谢您的帮助。谢谢。

Answer 1

您正在将 item（实际上应该称为 items，因为它是一个数组。名称很重要）设置为一个 undefined 元素的数组，因为您的 map() 回调没有 return 任何东西：

setItem(item.map(item => {
    if(item.id === itemId) {
        item.backsideVisible = !item.backsideVisible;
    }
}))

要么 return 更新的对象：

setItem(item.map(item => {
    if(item.id === itemId) {
        item.backsideVisible = !item.backsideVisible;
    }
    return item;
}))

或者让整个表达式成为一个 returned 对象：

setItem(item.map(item => ({
    ...item,
    backsideVisible: item.id === itemId ? !item.backsideVisible : item.backsideVisible
})));

使用 useState 触发事件时如何更改状态？

How can I change State when an Event is triggered with useState?

javascript

reactjs

react-hooks

use-state