我正在创建一个组件,它基本上是一个呈现为表格的公寓容器。我正在拯救一系列公寓作为国家财产“公寓”。表的每一行都有一个按钮,它应该通过调用外部API从数据库中删除该行。一切正常,除了......!有没有办法在每次有人在数据库中创建记录时重新渲染这个组件(公寓列表)(这是由我的React应用程序的另一个组件完成的)?
每次数据库更改时重新呈现组件是否正确?
案例1)我打开浏览器,我可以看到项目列表。用户更改数据库,这个项目列表实时更改,我可以看到如何创建项目并从数据库中删除。
案例2)我打开浏览器,我可以再次看到项目列表,在我面前没有任何变化。现在,其他一些人从我的列表中删除项目,我不知道它。我点击这个项目,但该项目不再在数据库中。该怎么办?
那么,这个用例的最佳态度是什么?在这里,您可以看到我的Aparatments Component的代码。
import React, { Component } from 'react';
import axios from "axios";
export default class FlatsLayout extends Component {
constructor(props) {
super(props);
this.state = {
flats: []
}
}
componentDidMount() {
axios.get("http://192.168.0.14:4000/flats")
.then(res => {
this.setState({flats: res.data});
console.log(res.data);
});
}
onDeleteFlat(flatID, e) {
axios.delete("http://192.168.0.14:4000/flats/" + flatID).then( res => {
console.log(res.data);
});
const data = this.state.flats.filter(flat => flat._id !== flatID);
this.setState({
flats: data
});
}
render() {
return (
<div>
<h2>Flats</h2>
<table className="table table-striped table-bordered">
<tbody>
{
this.state.flats.map( flat => {
return (
<tr key={flat._id}>
...
<td><a href={flat.URL}>link</a></td>
<td>
<button
type="Button"
className="btn btn-sm btn-danger"
onClick={ (e) => this.onDeleteFlat(flat._id, e)}
>
Remove
</button>
</td>
</tr>
)
})
}
</tbody>
</table>
</div>
)
}
}
有多种方法可以实现这一目标: