React.js Извлечение данных из определенной строки

Question

я создал таблицу в React.js, также я использую Firebase для хранения данных, вот мой код таблицы

{tableData.map((row, index) => {
    return (
        <tr key={row + index}>
            {row.map((cell, index) => {
                return (
                    <td key={"cell_" + index} onClick={() => this.handleClick(this.state.userSurname)}>{cell}</td>
                );
            })}
        </tr>
    );
})}

а вот мой this.setState:

componentDidMount() {
    db.onceGetUsers().on("child_added", snap =>{
                var username = snap.child("name").child("name").val();
                var surname = snap.child("name").child("surname").val();
               this.setState({ users: this.state.users.concat([username])});
               this.setState({ userSurname: this.state.userSurname.concat([surname])})
    })
  }

Вот моя handleClick функция:

  handleClick(event){
    alert(event)
}

Итак ... вот моя проблема, диалоговое окно оповещения отображает фамилию каждого пользователя, и я пытаюсь отобразить фамилию пользователя, на которого нажали в таблице. Как я могу это сделать? :)

Answer 1

Вы можете достичь этого, если не хотите менять структуру своего состояния:

handleClick(i){
    alert(this.state.userSurname[i])
}

{tableData.map((row, i) => {
    return (
        <tr key={row + i}>
            {row.map((cell, k) => {
                return (
                    <td key={"cell_" + k} onClick={() => this.handleClick(i)}>{cell}</td>
                );
            })}
        </tr>
    );
})}

Answer 2

Из документов child_added:

Получить списки предметов или прослушать дополнения к списку предметов. Это событие запускается один раз для каждого существующего дочернего элемента, а затем снова каждый раз, когда в указанный путь добавляется новый дочерний элемент. Слушателю передается снимок, содержащий данные нового ребенка.

Чтобы отобразить фамилию только пользователя, который щелкнул в таблице, вам необходимо прочитать данные один раз, например:

db.onceGetUsers().once('value').then(snap)=> {
var username = snap.child("name").child("name").val();
var surname = snap.child("name").child("surname").val();
});

once

Прослушивает ровно одно событие указанного типа, а затем останавливает прослушивание.

подробнее здесь:

https://firebase.google.com/docs/reference/js/firebase.database.Reference#once