Я учусь реагировать. У меня есть массив в моем состоянии, который я отображаю, чтобы отобразить каждое значение массива на отдельной кнопке. Когда пользователь нажимает одну из этих кнопок, я хочу вызвать функцию, чтобы показать некоторую информацию, относящуюся к этой кнопке (кнопка представляет определенный заказ клиента). Я попытался установить состояние в событии 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>
        )
    }
}
0
Luke Sharon 2 Май 2020 в 09:10

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>
    )

Кроме того, никогда не устанавливайте setState в вашем методе рендеринга, и именно поэтому вы получили max depth error в своей предыдущей попытке.

0
gdh 2 Май 2020 в 06:19

Вы могли бы предоставить функции showInfo информацию о кнопке через параметры.

Так что это будет onClick={() => this.showInfo(item)}

0
rrebase 2 Май 2020 в 06:18