Как отправить уникальное значение в функцию из onClick в цикле отображения - PullRequest
Новая
       50

Как отправить уникальное значение в функцию из onClick в цикле отображения

0 голосов
/ 02 мая 2020

Я изучаю React. У меня есть массив в моем состоянии, который я отображаю, чтобы отобразить каждое значение массива на отдельной кнопке. Когда пользователь нажимает одну из этих кнопок, я хочу вызвать функцию, чтобы показать некоторую информацию, указанную c для этой кнопки (кнопка представляет определенный c заказ клиента). Я попытался установить состояние в событии 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>
        )
    }
}

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Вы можете предоставить функции showInfo информацию о кнопке с помощью параметров.

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

0 голосов
/ 02 мая 2020

Используйте встроенную функцию стрелки в качестве обратного вызова для вашего 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 в вашей предыдущей попытке.

...