在控制台中获取合成基础事件而不是该特定项目

Posted 2023-02-22

【中文标题】在控制台中获取合成基础事件而不是该特定项目

【英文标题】：Getting Synthetic Base Event in console instead of that particular item

【发布时间】：2022-01-02 11:10:37

【问题描述】：

下面是代码。每当我单击添加到购物车时，对于每个项目。我可以看到一个警报。 如果我 console.log 一些静态的东西，而不是 item，它也可以工作，但使用 item。我在控制台中收到一个合成基础事件

function Product() 
    useEffect (() => 
        fetchItems();
    ,[]);

    const [items, setItems] = useState([]);

    const fetchItems = async() => 
        const data = await fetch('/product',
            method: "GET",
            headers: 
                Accept: "application/json",
                "Content-Type": "application/json"
            ,
            credentials: "include"
        );
        const items = await data.json();
        setItems(items);
    ;

    const clickMe = (item) => 
        alert("Working");
        console.log(item);
    ;

    return (
        <div>
            <h1>Product Page</h1>

            
                items.map(item => (
                    <p>item.productname item.productprice  item.type <a onClick=clickMe.bind(item)>add to cart</a> </p>
                ))
            

        </div>
    )


export default Product

【参考方案1】：

这里.bind 并没有按照你的想法去做。

Function.prototype.bind

bind() 方法创建一个新函数，在调用该函数时，将其 this 关键字设置为提供的值，并在调用新函数时提供的任何参数之前具有给定的参数序列。

使用onClick=clickMe.bind(item)，您只是将item 绑定到函数的this，onClick 事件仍作为第一个参数传递给回调。

如果您想传递当前映射的item，则需要将其作为附加参数传递。

onClick=clickMe.bind(null, item)

您也可以只使用匿名回调函数。

onClick=() => clickMe(item)

或者将clickMe 声明为一个柯里化函数并返回带有item 在回调范围内关闭的点击处理程序。

const clickMe = (item) => () => 
    alert("Working");
    console.log(item);
;

...

onClick=clickMe(item)

【讨论】：

@DrewResse 我确实进行了更改，但出于某种原因，没有点击任何内容。我会自动收到警报。 items.map(item => (

@RitikSingh 看起来你想要选项 3，即 curried 函数。你有没有发现clickMe 被更新为一个返回函数的函数？即(arg) => () => ?第一个函数被立即调用，所以如果不返回另一个函数，则执行主体。