选择删除链接后如何在React中重新渲染数据？

Question

我让这个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"));

Answer 1

.then(results => {
  const cards = this.state.cards;
  const newList = cards.filter(i=> i.id !== cardID);
  this.setState({ cards:newList })
});