javascript - 如何在映射循环中从 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)}