React-Redux组件Saga异步调用后更新内部状态的方法

嘿，我来帮你搞定这个需求！你已经成功把Redux里的图片数据拿到组件props里了，现在要同步组件自身的isLoading、分页相关状态并触发重渲染，核心思路就是监听props的变化，然后更新组件内部state，咱们一步步来：

1. 同步isLoading状态 #

首先你Redux的reducer里已经维护了isLoading状态，先把它也映射到组件props中：

const mapStateToProps = ({ ImageList }) => {
  // 新增isLoading的映射
  const { items, isLoading } = ImageList;
  return { items, isLoading };
};

接下来用类组件的生命周期函数同步状态，这里有两种常用方式：

方式一：用componentDidUpdate（直观易读） #

在组件类里添加这个方法，监听props中isLoading的变化，一旦不同就更新组件内部state：

componentDidUpdate(prevProps) {
  // 对比前后props的isLoading状态，不同则更新组件state
  if (prevProps.isLoading !== this.props.isLoading) {
    this.setState({ isLoading: this.props.isLoading });
  }
}

方式二：用getDerivedStateFromProps（props驱动state的标准写法） #

这个静态函数会在props变化时自动触发，返回新的state对象：

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.isLoading !== prevState.isLoading) {
    return { isLoading: nextProps.isLoading };
  }
  // 没有变化则返回null，不更新state
  return null;
}

2. 同步分页相关状态（currentPage、totalItemCount、totalPage） #

这些状态依赖于拿到的items数据，同样在生命周期函数里监听props.items的变化，计算后更新组件state：

结合componentDidUpdate实现 #

componentDidUpdate(prevProps, prevState) {
  // 先处理isLoading的同步
  if (prevProps.isLoading !== this.props.isLoading) {
    this.setState({ isLoading: this.props.isLoading });
  }

  // 当props中的items变化时，计算分页数据
  if (prevProps.items !== this.props.items) {
    const totalItemCount = this.props.items.length;
    // 根据当前选中的每页条数计算总页数
    const totalPage = Math.ceil(totalItemCount / this.state.selectedPageSize);
    
    this.setState({
      // 若需要对items做本地过滤/修改，再存到组件state；否则可直接用props.items
      items: this.props.items,
      totalItemCount,
      totalPage,
      currentPage: 1, // 数据更新后重置到第一页
    });
  }

  // 额外：如果每页条数selectedPageSize变化，重新计算总页数
  if (prevState.selectedPageSize !== this.state.selectedPageSize) {
    const totalPage = Math.ceil(this.state.totalItemCount / this.state.selectedPageSize);
    this.setState({ totalPage, currentPage: 1 });
  }
}

结合getDerivedStateFromProps实现 #

static getDerivedStateFromProps(nextProps, prevState) {
  const updates = {};
  // 同步isLoading
  if (nextProps.isLoading !== prevState.isLoading) {
    updates.isLoading = nextProps.isLoading;
  }

  // 同步分页数据
  if (nextProps.items !== prevState.items) {
    const totalItemCount = nextProps.items.length;
    const totalPage = Math.ceil(totalItemCount / prevState.selectedPageSize);
    updates.items = nextProps.items;
    updates.totalItemCount = totalItemCount;
    updates.totalPage = totalPage;
    updates.currentPage = 1;
  }

  // 返回更新对象，没有更新则返回null
  return Object.keys(updates).length ? updates : null;
}

// 处理selectedPageSize变化的逻辑放在componentDidUpdate里
componentDidUpdate(prevState) {
  if (prevState.selectedPageSize !== this.state.selectedPageSize) {
    const totalPage = Math.ceil(this.state.totalItemCount / this.state.selectedPageSize);
    this.setState({ totalPage, currentPage: 1 });
  }
}

小提示 #

• 如果你不需要对items做本地过滤/修改，其实可以直接用props.items，不用存到组件state里，减少冗余状态。
• 注意在componentDidUpdate里一定要加条件判断，避免无限循环更新state。

内容的提问来源于stack exchange，提问作者Harshit Laddha