0

我正在学习反应。我在我的状态中有一个数组，我正在映射它以在其自己的按钮上呈现数组的每个值。当用户单击其中一个按钮时，我想调用一个函数来显示特定于该按钮的一些信息（该按钮代表特定的客户订单）。我尝试在 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>
        )
    }
}
4

2 回答 2

1

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

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

于 2020-05-02T06:18:39.867 回答
0

使用内联箭头函数作为 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您之前尝试的原因。

于 2020-05-02T06:19:32.463 回答