Question

当我的组件挂载时，我调用API以通过redux存储区中的axios获取人员列表。

componentDidMount() {
  this.props.getPeople();
}

基本上，一旦API调用成功，我将使用最新数据更新redux存储中的peopleList状态。

现在，我（通过mapStatetoProps）映射到这个peopleList上，以在组件的render()中生成人员列表。到目前为止，一切都很好。

但是，每个人卡都有一个“喜欢”按钮，该按钮依次发出POST请求，以将人员对象的isLiked属性更改为“ true”（并使所有其他人员对象'isLiked'属性设置为false（一次只能显示一个）。

现在，当我单击“喜欢”按钮时，它仅会触发后端的更改。我必须刷新页面才能查看更新的渲染UI。

我是React的新手，我可以看到，当我执行componentDidUpdate()时，只要单击“赞”按钮，就可以访问新数据，如下所示：

componentDidUpdate(prevProps) {

    if(this.props.people !== prevProps.people) {
        console.log("PREV");
        console.log(prevProps.people);
        console.log("LATEST");
        console.log(this.props.people);
    }

}

我的问题是如何使我的渲染方法使用最新的道具，而不是单击componentDidMount()时渲染的道具？

Answer 1

您无需手动更新它，只需确保getPeople操作在您的Redux状态下更新了peopleList。如果是这样，那么React组件会在componentDidUpdate之后自动重新呈现DOM。

componentDidUpdate（）之后如何在render（）中使用最新的道具？

1 个答案: