如何在 componentDidUpdate() 之后在 render() 中使用最新的 props？答案

【问题标题】：How to use latest props in render() after componentDidUpdate()?如何在 componentDidUpdate() 之后在 render() 中使用最新的 props？
【发布时间】：2019-02-21 05:01:05
【问题描述】：

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

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

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

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

但是，每个人卡都有一个“喜欢”按钮，该按钮反过来执行 POST 请求以将人员对象的 isLiked 属性更改为“真”（并且还使所有其他人对象的 'isLiked' 属性为假（一次只能点赞一个））。

现在，当我单击“喜欢”按钮时，它只会触发后端的更改。我必须刷新页面才能看到更新后的渲染 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() 期间渲染的道具？

【问题讨论】：

this.props 是最新的。您可以在render 方法中使用它。
您确定要更新您的 refux 状态吗？如果你这样做了，应该自动触发对渲染的调用并且应该更新视图。你能展示你的组件代码吗？
@AnthonyRaymond 由于我的 this.props.people 是从 redux 状态获取数据，并且我可以看到它在我执行 componentDidUpdate 时发生了变化，这是否意味着 redux 状态真的更新了？
要完整正确地回答您的问题，我们需要查看您的 reducer 和 selector (mapStateToProps)。如果 redux 状态发生变化，render 应该总是自动获取最新的 props。你能用这些信息更新你的问题吗？
@catandmouse 我愿意。为了帮助您，我们需要组件的代码 + StephanHovius 要求的代码

标签： javascript reactjs react-redux react-component

【解决方案1】：

您不需要手动更新它，只需确保 getPeople 操作在您的 Redux 状态下更新 peopleList。如果是，那么 React 组件会在 componentDidUpdate 之后自动重新渲染 DOM。

【讨论】：