当 prop 改变时重新渲染 React 组件

小能豆

当 prop 改变时重新渲染 React 组件

javascript

我正在尝试将展示组件与容器组件分开。我有一个SitesTable和一个SitesTableContainer。容器负责触发 redux 操作以根据当前用户获取适当的站点。

问题是，在容器组件首次呈现后，当前用户是异步获取的。这意味着容器组件不知道它需要重新执行其componentDidMount函数中的代码，这将更新要发送到的数据SitesTable。我认为当容器组件的某个 props（用户）发生变化时，我需要重新呈现容器组件。我该如何正确执行此操作？

class SitesTableContainer extends React.Component {
    static get propTypes() {
      return {
        sites: React.PropTypes.object,
        user: React.PropTypes.object,
        isManager: React.PropTypes.boolean
      }
     }

    componentDidMount() {
      if (this.props.isManager) {
        this.props.dispatch(actions.fetchAllSites())
      } else {
        const currentUserId = this.props.user.get('id')
        this.props.dispatch(actions.fetchUsersSites(currentUserId))
      }  
    }

    render() {
      return <SitesTable sites={this.props.sites}/>
    }
}

function mapStateToProps(state) {
  const user = userUtils.getCurrentUser(state)

  return {
    sites: state.get('sites'),
    user,
    isManager: userUtils.isManager(user)
  }
}

export default connect(mapStateToProps)(SitesTableContainer);

阅读 35

2024-06-11

共1个答案

小能豆

为了确保SitesTableContainer组件在 prop 更改时重新渲染user，您可以使用componentDidUpdate生命周期方法。每当组件更新时（包括 prop 更改时），都会调用此方法。

你可以通过以下方式修改SitesTableContainer组件来处理 prop 的更新user：

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { fetchAllSites, fetchUsersSites } from './actions'; // Import your action creators

class SitesTableContainer extends React.Component {
  static propTypes = {
    sites: PropTypes.object,
    user: PropTypes.object,
    isManager: PropTypes.bool,
    dispatch: PropTypes.func.isRequired // Ensure dispatch is provided by connect
  };

  componentDidMount() {
    this.fetchSites();
  }

  componentDidUpdate(prevProps) {
    // Check if the user prop has changed
    if (this.props.user !== prevProps.user) {
      this.fetchSites();
    }
  }

  fetchSites() {
    const { dispatch, isManager, user } = this.props;
    if (isManager) {
      dispatch(fetchAllSites());
    } else {
      const currentUserId = user.get('id');
      dispatch(fetchUsersSites(currentUserId));
    }
  }

  render() {
    return <SitesTable sites={this.props.sites} />;
  }
}

const mapStateToProps = (state) => {
  const user = userUtils.getCurrentUser(state);

  return {
    sites: state.get('sites'),
    user,
    isManager: userUtils.isManager(user)
  };
};

export default connect(mapStateToProps)(SitesTableContainer);

在此更新版本中：

我们componentDidUpdate向该类添加了一个方法SitesTableContainer。此方法将当前 prop 与前一个 prop 进行比较，如果prop 已更改，user则触发站点获取。user
该fetchSites方法封装了根据用户角色获取站点的逻辑（isManager）。
我们还将定义移到方法propTypes之外get propTypes，以获得更清晰的语法。

通过这些更改，SitesTableContainer每当 prop 发生更改时，您的组件就会重新获取站点user，确保将正确的数据传递给组件SitesTable。

2024-06-11