如何在映射循环中从 onClick 向函数发送唯一值

Question

我正在学习 React。我的状态中有一个数组，我正在映射它以在其自己的按钮上呈现数组的每个值。当用户单击其中一个按钮时，我想调用一个函数来显示特定于该按钮的一些信息（该按钮代表特定的客户订单）。我试图在 onClick 事件中设置状态，但出现“超出最大更新深度”错误。如果有一种方法可以从 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 的原因。