如何将唯一值发送到映射循环中的 onClick 函数

Question

我正在学习 React。我在我的状态下有一个数组，我正在映射它以在其自己的按钮上呈现数组的每个值。当用户单击其中一个按钮时，我想调用一个函数来显示特定于该按钮的一些信息（该按钮代表特定的客户订单）。我试图在 onClick 事件中设置状态，但出现 'Maximum update depth exceeded' 错误。如果有一种方法可以从 onClick 设置状态，那将解决我的问题，因为我可以将单击的特定按钮的项目值设置为状态并在以后使用它。我的另一个想法是将项目发送到 showInfo 函数......但是，我什至不知道这是否可能。我怎样才能从这个按钮列表中调用相同的函数，并使结果对按钮来说是唯一的？

showInfo = (e) => {

    }

    componentDidMount() {
        this.showAllOrders();
    }

    render() {
        return (
            <div>
                <h1>Hello from past orders!!!</h1>
                <ul id="orderList">
                {this.state.orderDates.map((item =>
                    <li><button onClick={this.showInfo} key={item}>{item}</button></li>
                    ))}
                </ul>
            </div>
        )
    }
}

Answer 1

您可以通过参数为函数 showInfo 提供有关按钮的信息。

所以会是onClick={() => this.showInfo(item)}

Answer 2

使用内联箭头函数作为对您的 onClick 的回调并传递您想要的数据。

...
showInfo = (item) => {
   console.log(item);
}
...
render() {
    return (
        <div>
            <h1>Hello from past orders!!!</h1>
            <ul id="orderList">
            {this.state.orderDates.map((item =>
                <li><button onClick={() => this.showInfo(item)} key={item}>{item}</button></li>
                ))}
            </ul>
        </div>
    )

此外，永远不要在您的渲染方法中设置状态，这就是为什么您在之前的尝试中得到了 max depth error。

如何将唯一值发送到映射循环中的 onClick 函数

How to send unique value to function from onClick in a mapping loop

javascript

mapping

onclick

setstate

reactjs