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

【问题标题】：How can I change State when an Event is triggered with useState?当使用 useState 触发事件时如何更改状态？
【发布时间】：2021-10-06 12:49:06
【问题描述】：

为了学习反应，我试图实现一个基本的商店。

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

对于这个问题，我有 3 个 js 文件： Container.js（包含从产品卡片到导航栏等的所有内容）， ProductList.js（返回所有不同产品的 UL）和 ItemCard.js（返回实际产品为 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 函数似乎有一些错误。

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

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

【问题讨论】：

您忘记在每次迭代时返回 item。此外，您想为此使用 setState 的函数签名。始终使用状态的快照，而不是状态本身

标签： javascript reactjs react-hooks use-state

【解决方案1】：

您将item（实际上应该称为items，因为它是一个数组。名称很重要）设置为undefined 元素数组，因为您的map() 回调不返回任何内容：

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

要么返回更新的对象：

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

或者让整个表达式成为一个返回的对象：

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

【讨论】：