我让这个React组件在页面上显示几张卡片(每张卡片都是一个单独的DIV)。当我单击卡上的“删除”时,所选卡将从数据库中删除,但是当我手动刷新浏览器时,只能看到该卡消失的更改。有没有办法告诉deleteRow()函数在重新获得新的JSON后重新呈现页面?
我在后端使用Golang,但我认为这并不重要。 “删除”链接使用DELETE方法(REST API)调用处理程序,然后从数据库中删除该行。
class Card extends React.Component {
constructor() {
super();
this.state = {
cards: [],
};
}
componentDidMount() {
fetch("/people")
.then(results => results.json())
.then(data => {
let cards = data.map(card => {
return (
<div class="card">
<p>{card.PersonFirstName}</p>
<p>{card.PersonLastName}</p>
<p><a href="JavaScript:void(0);" onClick={(e) => this.deleteRow(card.ID)}>Delete</a></p>
</div>
)
});
this.setState({cards: cards});
})
}
deleteRow(cardID) {
fetch("/people/" + cardID, {
method: "delete"
})
.then(results => results.json());
}
render() {
return (
<div className="card-container">
{this.state.cards}
</div>
)
}
}
ReactDOM.render(<Card />, document.getElementById("root"));
.then(results => {
const cards = this.state.cards;
const newList = cards.filter(i=> i.id !== cardID);
this.setState({ cards:newList })
});