向 SQLite 后端添加内容时更新表
Posted
技术标签:
【中文标题】向 SQLite 后端添加内容时更新表【英文标题】：Update Table when adding Content to the SQLite Backend 【发布时间】：2021-07-20 21:47:43 【问题描述】：我在我的 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
编辑： AddNew.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
【问题讨论】：
【参考方案1】：由于后端数据库中的插入操作，您将无法更新客户端。您必须“轮询”服务器以进行任何更改。
这是一个您可以尝试的自定义“useInterval”挂钩。 useInterval custom hook
我在您的代码中没有看到“Anlegen”按钮，但是是的，您可以向它添加一个 onClick 事件/处理程序来触发与您的 componentDidMount() 方法中相同的获取请求。
您还可以在写入操作之后使用套接字和向客户端广播。
【讨论】：
抱歉，用按钮添加了缺少的“AddNew”文件。以上是关于向 SQLite 后端添加内容时更新表的主要内容，如果未能解决你的问题，请参考以下文章