我在互联网上找到了一个教程。
使用Google的Realtime数据库用JavaScript和React JS编写的简单CRUD应用程序。
这是本教程，我正在谈论：https://sebhastian.com/react-firebase-real-time-database-guide
工作正常；但是，它使用<li>元素来显示数据。
我的数据集很大，所以我想在表中显示数据。
它可以正常工作，并且表显示了我想要的所有内容，但是编辑功能已损坏。
在控制台中记录：
名称：未定义
这是对应的代码。我已经尝试了几乎所有内容，都用谷歌搜索，并且将代码更改了一百万次：
<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;