Отображение данных Firebase в редактируемой таблице (React JS)

Question

Я нашел учебник в интернете.

Простое приложение CRUD, написанное на JavaScript и React JS с использованием Googles Realtimedatabase.

Это учебное пособие, о котором я говорю: https://sebhastian.com/react-firebase-real-time-database-guide

Работает нормально;однако для отображения данных используются элементы <li>.

Мой набор данных намного больше, поэтому я хотел бы отобразить данные в таблице.

Это работает, и в таблице все отображается так, как я хочу, но функция редактирования не работает.

В консоли зарегистрировано:

name: undefined

Вот соответствующий код.Я попробовал почти все, гуглил и изменил код миллион раз:

     <table class="table" id="example-table">

      <thead class="text-primary">
        <tr>
          <th scope="col">Name</th>
          <th scope="col">PLZ</th>
          <th scope="col">Addresse</th>
          <th scope="col">Stadt</th>
          <th scope="col">lat</th>
          <th scope="col">lng</th>
          <th scope="col">Kategorie</th>

          <th class="text-center" scope="col">Ändern</th>
        </tr>
      </thead>
      <tbody>


        {developers.map(developer => (
                <tr
                  key={developer.uid}>
                <td> {developer.name}</td>
           <td> {developer.postal}</td>
          <td> {developer.address} </td>
          <td> {developer.city} </td>
          <td> {developer.lat} </td>
          <td> {developer.lng} </td>
          <td> {developer.category} </td>

                <td>  
                    <button
                      onClick={() => this.removeData(developer)}
                      className="btn btn-link"
                    >
                      Delete
                    </button>
                    <button
                      onClick={() => this.updateData(developer)}
                      className="btn btn-link"
                    >
                      Edit
                    </button>
                    </td>
                </tr>
              ))}

    </tbody>
    </table>

РЕДАКТИРОВАТЬ:

Вот полный код.

import React from "react";

import Firebase from "firebase";
import config from "./config";

class App extends React.Component {
  constructor(props) {
    super(props);
    Firebase.initializeApp(config);

    this.state = {
      developers: []
    };
  }




  componentDidMount() {
    this.getUserData();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState !== this.state) {
      this.writeUserData();
    }
  }

  writeUserData = () => {
    Firebase.database()
      .ref("/")
      .set(this.state);
    console.log("DATA SAVED");
  };

  getUserData = () => {
    let ref = Firebase.database().ref("/");
    ref.on("value", snapshot => {
      const state = snapshot.val();
      this.setState(state);
    });
  };

  handleSubmit = event => {
    event.preventDefault();
    let name = this.refs.name.value;
    let postal = this.refs.postal.value;
    let uid = this.refs.uid.value;
    let address = this.refs.address.value;
    let city = this.refs.city.value;
    let lat = this.refs.lat.value;
    let lng = this.refs.lng.value;



    if (uid && name && postal && address && city && lat && lng) {
      const { developers } = this.state;
      const devIndex = developers.findIndex(data => {
        return data.uid === uid;
      });
      developers[devIndex].name = name;
      developers[devIndex].address = address;
      developers[devIndex].postal = postal;
      developers[devIndex].city = city;
      developers[devIndex].lat = lat;
      developers[devIndex].lng = lng;



      this.setState({ developers });
    } else if (name && postal && address && city && lat && lng) {
      const uid = new Date().getTime().toString();
      const { developers } = this.state;
      developers.push({ uid, name, postal, address, city, lat, lng });
      this.setState({ developers });
    }

    this.refs.name.value = "";
    this.refs.postal.value = "";
    this.refs.uid.value = "";
    this.refs.address.value = "";
    this.refs.city.value = "";
    this.refs.lat.value = "";
    this.refs.lng.value = "";

  };

  removeData = developer => {
    const { developers } = this.state;
    const newState = developers.filter(data => {
      return data.uid !== developer.uid;
    });
    this.setState({ developers: newState });
  };

  updateData = developer => {
    this.refs.uid.value = developer.uid;
    this.refs.name.value = developer.name;
    this.refs.postal.value = developer.postal;
    this.refs.address.value = developer.address;
    this.refs.city.value = developer.city;
    this.refs.lat.value = developer.lat;
    this.refs.lng.value = developer.lng;


  };

  render() {
    const { developers } = this.state;
    return (
      <React.Fragment>

<head>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png"/>
  <link rel="icon" type="image/png" href="../assets/img/favicon.png"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>
    Händlersuche
  </title>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />

  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"/>
  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
  <link href="../assets/css/now-ui-dashboard.css?v=1.3.0" rel="stylesheet"/>
  <link href="https://unpkg.com/tabulator-tables@4.2.5/dist/css/tabulator.min.css" rel="stylesheet"/>


</head>

<body class="">
  <div class="wrapper ">
    <div class="sidebar" data-color="green">

      <div class="logo">
        <a  class="simple-text logo-mini">

        </a>
        <a class="simple-text logo-normal">
          <img src="https://www.al-ko.com/shop/skin/frontend/alko_rb/default/images/logo.png"/>
        </a>
      </div>
      <div class="sidebar-wrapper" id="sidebar-wrapper">
        <ul class="nav">
          <li>
            <a href="./dashboard.html">
              <i class="now-ui-icons design_app"></i>
              <p>Dashboard</p>
            </a>
          </li>
          <li>
            <a href="./icons.html">
              <i class="now-ui-icons education_atom"></i>
              <p>Icons</p>
            </a>
          </li>
          <li>
            <a href="./map.html">
              <i class="now-ui-icons location_map-big"></i>
              <p>Maps</p>
            </a>
          </li>
          <li>
            <a href="./notifications.html">
              <i class="now-ui-icons ui-1_bell-53"></i>
              <p>Notifications</p>
            </a>
          </li>
          <li>
            <a href="./user.html">
              <i class="now-ui-icons users_single-02"></i>
              <p>User Profile</p>
            </a>
          </li>
          <li class="active ">
            <a href="./tables.html">
              <i class="now-ui-icons design_bullet-list-67"></i>
              <p>Table List</p>
            </a>
          </li>
          <li>
            <a href="./typography.html">
              <i class="now-ui-icons text_caps-small"></i>
              <p>Typography</p>
            </a>
          </li>

        </ul>
      </div>
    </div>
    <div class="main-panel" id="main-panel">
      <nav class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
        <div class="container-fluid">
          <div class="navbar-wrapper">
            <div class="navbar-toggle">
              <button type="button" class="navbar-toggler">
                <span class="navbar-toggler-bar bar1"></span>
                <span class="navbar-toggler-bar bar2"></span>
                <span class="navbar-toggler-bar bar3"></span>
              </button>
            </div>
            <a class="navbar-brand" href="#pablo">Table List</a>
          </div>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-bar navbar-kebab"></span>
            <span class="navbar-toggler-bar navbar-kebab"></span>
            <span class="navbar-toggler-bar navbar-kebab"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-end" id="navigation">
            <form>
              <div class="input-group no-border">
                <input type="text" value="" class="form-control" placeholder="Search..."/>
                <div class="input-group-append">
                  <div class="input-group-text">
                    <i class="now-ui-icons ui-1_zoom-bold"></i>
                  </div>
                </div>
              </div>
            </form>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#pablo">
                  <i class="now-ui-icons media-2_sound-wave"></i>
                  <p>
                    <span class="d-lg-none d-md-block">Stats</span>
                  </p>
                </a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="now-ui-icons location_world"></i>
                  <p>
                    <span class="d-lg-none d-md-block">Some Actions</span>
                  </p>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#pablo">
                  <i class="now-ui-icons users_single-02"></i>
                  <p>
                    <span class="d-lg-none d-md-block">Account</span>
                  </p>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div class="panel-header panel-header-sm">
      </div>
      <div class="content">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
              <h2>Neuen Daten Satz hinzufügen</h2>
              </div>

              <form onSubmit={this.handleSubmit}>
                <div className="form-row">
                  <input type="hidden" ref="uid" />
                  <div className="form-group col-md-6">
                    <label>Name</label>
                    <input
                      type="text"
                      ref="name"
                      className="form-control"
                      placeholder="Name"
                    />
                  </div>
                  <div className="form-group col-md-6">
                    <label>PLZ</label>
                    <input
                      type="text"
                      ref="postal"
                      className="form-control"
                      placeholder="PLZ"
                    />
                  </div>
                  <div className="form-group col-md-6">
                    <label>Address</label>
                    <input
                      type="text"
                      ref="address"
                      className="form-control"
                      placeholder="Address"
                    />
                  </div>
                  <div className="form-group col-md-6">
                    <label>Stadt</label>
                    <input
                      type="text"
                      ref="city"
                      className="form-control"
                      placeholder="Stadt"
                    />
                  </div>

                  <div className="form-group col-md-6">
                    <label>Laengengrad</label>
                    <input
                      type="text"
                      ref="lat"
                      className="form-control"
                      placeholder="Laengengrad"
                    />
                  </div>
                  <div className="form-group col-md-6">
                    <label>Breitengrad</label>
                    <input
                      type="text"
                      ref="lng"
                      className="form-control"
                      placeholder="Breitengrad"
                    />
                  </div>
                </div>
                <button type="submit" className="btn btn-primary">
                  Speichern
                </button>
              </form>
            </div>

          <div class="card-body">
                <div class="table-responsive">

                  <table class="table" id="example-table">

      <thead class="text-primary">
        <tr>
          <th scope="col">Name</th>
          <th scope="col">PLZ</th>
          <th scope="col">Addresse</th>
          <th scope="col">Stadt</th>
          <th scope="col">lat</th>
          <th scope="col">lng</th>
          <th scope="col">Kategorie</th>

          <th class="text-center" scope="col">Ändern</th>
        </tr>
      </thead>
      <tbody>


        {developers.map(developer => (
                <tr
                  key={developer.uid}>
                <td> {developer.name}</td>
           <td> {developer.postal}</td>
          <td> {developer.address} </td>
          <td> {developer.city} </td>
          <td> {developer.lat} </td>
          <td> {developer.lng} </td>
          <td> {developer.category} </td>

                <td>  
                    <button
                      onClick={() => this.removeData(developer)}
                      className="btn btn-link"
                    >
                      Delete
                    </button>
                    <button
                      onClick={() => this.updateData(developer)}
                      className="btn btn-link"
                    >
                      Edit
                    </button>
                    </td>
                </tr>
              ))}

    </tbody>
    </table>
  </div>

</div>
</div>
</div>


      <footer class="footer">

      </footer>
    </div>
  </div>
  </div>




</body>







      </React.Fragment>
    );
  }
}

export default App;