我在我的 React 前端构建了一个表，它在我的 Expressjs 后端显示来自 SQLite 表的数据。
我还构建了一个表单，用于从前端在此表中插入数据。
我现在的问题是，每次我插入数据时，我都必须刷新页面才能看到表中的新插入。当新数据写入后端时，或者当我点击“Anlegen”按钮时，是否有任何解决方案可以自动更新表？
这是我的代码：
import React, { Component } from 'react'
class Table extends Component {
constructor(props) {
super(props)
this.state = {
parts: [],
isLoading: false,
isError: false
}
}
async componentDidMount() {
this.setState({ isLoading: true })
const response = await fetch('http://localhost:5000/api/bestand')
if (response.ok) {
const parts = await response.json()
this.setState({ parts, isLoading: false })
} else {
this.setState({ isError: true, isLoading: false })
}
}
render() {
const { parts, isLoading, isError } = this.state
if (isLoading) {
return <div>Loading...</div>
}
if (isError) {
return <div>Error</div>
}
return parts.length > 0
? (
<table className="table" id="tblData" >
<thead>
<tr>
{this.renderTableHeader()}
</tr>
</thead>
<tbody>
{this.renderTableRows()}
</tbody>
</table>
) : (
<div>
No parts.
</div>
)
}
renderTableHeader = () => {
return Object.keys(this.state.parts[0]).map(attr =>
<th key={attr} >
{attr}
</th>)
}
renderTableRows = () => {
return this.state.parts.map(part => {
return (
<tr key={part.id}>
<td>{part.Teilenummer}</td>
<td>{part.Hersteller}</td>
<td>{part.Beschreibung}</td>
<td>{part.Preis}</td>
<td>{part.SKU}</td>
</tr>
)
})
}
}
export default Table
编辑： 添加New.js
import React, { Component } from 'react'
import axios from "axios"
import Sidebar from '../Components/Sidebar'
import Table from '../Components/Table'
import '../css/Global.css'
import '../css/AddNew.css'
class New extends Component {
constructor(props) {
super(props);
this.state = {
Teilenummer: "",
SKU: "",
Hersteller: "",
Preis: "",
Beschreibung: "",
answerOk: "Success",
answerDenied: "Denied",
};
}
render() {
return (
<div>
<Sidebar />
<div className="container">
<div className="box-wrapper">
<div id="box2">
<form onSubmit={this.handleSubmit.bind(this)} method="POST">
<div className="Teilenummer">
<label>
Teilenummer:
<br/>
<input
type="JSON"
className="teilenrinput"
name="Teilenummer"
id="Teilenummer"
value={this.state.Teilenummer}
onChange={this.handleChange.bind(this)}
required
/>
<br /><br />
</label>
</div>
<div className="SKU">
<label>SKU:
<br />
<input
type="text"
name="SKU"
className="skuinput"
id="SKU"
value={this.state.SKU}
onChange={this.handleChange.bind(this)}
required
/>
<br /><br />
</label>
</div>
<div className="Price">
<label>
Preis:
<br />
<input
type="text"
name="Price"
className="priceinput"
id="Preis"
value={this.state.Preis}
onChange={this.handleChange.bind(this)}
required
/>
<br /><br />
</label>
</div>
<div className="Hersteller">
<label>
Hersteller:
<br />
<input
list="manufacturers"
name="Hersteller"
id="Hersteller"
className="herstellerinput"
value={this.state.Hersteller}
onChange={this.handleChange.bind(this)}
required
>
</input>
<datalist id="manufacturers">
<option value="Volkswagen">Volkswagen</option>
<option value="Audi">Audi</option>
<option value="BMW" selected="selected">BMW</option>
<option value="Mercedes" selected="selected">Mercedes</option>
<option value="Opel" selected="selected">Opel</option>
</datalist>
</label>
</div>
<div className="Beschreibung">
<label>
Beschreibung:
<br />
<input
type="text"
name="Beschreibung"
className="beschreibunginput"
id="Beschreibung"
value={this.state.Beschreibung}
onChange={this.handleChange.bind(this)}
required
/>
<br /><br />
</label>
</div>
<input class="Eintragen-Button" type="submit" value="Anlegen "/>
<span id="response"></span>
<button className="exportieren" onClick="exportTableToExcel('tblData')">Exportieren</button>
</form>
</div>
<div id="box3">
<div id="box4">
<table className="table" id="tblData">
<thead className="tblhead" >
<Table />
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
)
}
handleChange(event) {
const field = event.target.id;
if (field === "Teilenummer") {
this.setState({ Teilenummer: event.target.value });
} else if (field === "SKU") {
this.setState({ SKU: event.target.value });
} else if (field === "Hersteller") {
this.setState({ Hersteller: event.target.value });
} else if (field === "Preis") {
this.setState({ Preis: event.target.value });
} else if (field === "Beschreibung") {
this.setState({ Beschreibung: event.target.value });
}
}
handleSubmit(event) {
event.preventDefault();
this.setState({ status: "Submit" });
axios({
method: "POST",
url: "http://localhost:5000/api/teile/",
headers: { 'Content-Type': 'application/json' },
data: {
Teilenummer: this.state.Teilenummer,
SKU: this.state.SKU,
Hersteller: this.state.Hersteller,
Preis: this.state.Preis,
Beschreibung: this.state.Beschreibung
}
}).then((response, props) => {
console.log(response);
if (response.data.answer === this.state.answerOk) {
this.setState({ Teilenummer: "",
SKU: "",
Hersteller: "",
Preis: "",
Beschreibung: "",
status: "Logged in" })
alert("Success");
} else if (response.data.answer === this.state.answerDenied) {
this.setState({ Teilenummer: "",
SKU: "",
Hersteller: "",
Preis: "",
Beschreibung: "",
status: "Failed" })
alert("Wrong Username or Password");
}
});
}
}
export default New
答案 0 :(得分：1)
由于后端数据库中的插入操作，您将无法更新客户端。您必须“轮询”服务器以进行任何更改。
这是您可以尝试的自定义“useInterval”挂钩。 useInterval custom hook
我在您的代码中没有看到“Anlegen”按钮，但是是的，您可以向其添加一个 onClick 事件/处理程序以触发与您的 componentDidMount() 方法中相同的获取请求。
您还可以在写入操作后使用套接字并向客户端广播。