Redux属性更新时更新组件状态的正确实践？规避无限循环

用户登录后，应用会发起若干异步API请求，请求在index.tsx中处理，响应结果存入Redux store。这些数据用于渲染一个非默认显示标签页中的下拉菜单，但存在用户在API响应返回前快速切换到该标签页的情况，导致componentDidMount中加载的数据可能不完整。

标签页组件代码 #

class SearchConditionGroup extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);

        this.state = {
            isMounted: false,
            extendData: [],
            isAddAndConditionDropdownOpen: false,
            openAddAndConditionDropdownAboveButton: false,
            searchConditionDropdownOptions: [],
            searchConditions: [],
        }
    }

  componentDidMount = async (): Promise<void> => {        
      try {
          await this.cacheDynamicData();

          // 将 SearchConditionDropdownItem/SearchConditionDropdownSubmenuItem 转换为下拉菜单需要的 RichOption 对象数组
          const searchConditionDropdownOptions: Array<RichOption> = await Promise
              .allSettled(SearchConditionsDropdownItems.map(this.searchConditionDropdownMenuItemToDropdownOption)) 
              .then((results: Array<PromiseSettledResult<RichOption>>) => results.filter((result: PromiseSettledResult<RichOption>) => result.status === "fulfilled") as Array<PromiseFulfilledResult<RichOption>>) 
              .then((results: Array<PromiseFulfilledResult<RichOption>>) => results.map((result: PromiseFulfilledResult<RichOption>) => result.value)); 

          // 将下拉选项存入组件状态
          this.setState({searchConditionDropdownOptions: searchConditionDropdownOptions, isMounted: true });
      } catch (error) {
          console.error(error);
      }
  }

Redux映射代码 #

const mapStateToProps = state => {
    return {
        tags: state.tags,
        categories: state.categories,
    };
};
  
export default connect(mapStateToProps)(SearchConditionGroup);

遇到的问题 #

Redux store更新时仅触发组件更新而非重新挂载，尝试在componentDidUpdate中更新状态却引发无限循环：

componentDidUpdate = async (prevProps: Props, prevState: State): Promise<void> => {

        const searchConditionDropdownOptionsUpdate: Array<RichOption> = await Promise 
            .allSettled(SearchConditionsDropdownItems.map(this.searchConditionDropdownMenuItemToDropdownOption)) 
            .then((results: Array<PromiseSettledResult<RichOption>>) => results.filter((result: PromiseSettledResult<RichOption>) => result.status === "fulfilled") as Array<PromiseFulfilledResult<RichOption>>) 
            .then((results: Array<PromiseFulfilledResult<RichOption>>) => results.map((result: PromiseFulfilledResult<RichOption>) => result.value));
        
        if(prevState.searchConditionDropdownOptions !== this.state.searchConditionDropdownOptions) {   
            this.setState({ searchConditionDropdownOptions: searchConditionDropdownOptionsUpdate })
        }
}

请问当Redux store更新时，更新组件状态的正确实践是什么？

核心原则：避免不必要的状态同步 #

如果searchConditionDropdownMenuItemToDropdownOption是同步转换函数，完全不需要把转换后的结果存在组件state里，直接在渲染时基于props中的Redux数据实时转换即可。这样Redux数据更新时组件会自动重新渲染最新的下拉选项，彻底避免状态不同步的问题。

示例代码：

render() {
    const { tags, categories } = this.props;
    // 实时转换下拉选项，过滤转换失败的项
    const searchConditionDropdownOptions = SearchConditionsDropdownItems
        .map(item => {
            try {
                return this.searchConditionDropdownMenuItemToDropdownOption(item);
            } catch (e) {
                console.error(e);
                return null;
            }
        })
        .filter(Boolean);

    return (
        {/* 使用实时转换后的searchConditionDropdownOptions渲染下拉菜单 */}
        <Dropdown options={searchConditionDropdownOptions} />
    );
}

若必须异步转换（转换依赖异步操作） #

如果转换逻辑确实是异步的，需要在componentDidUpdate中做以下优化：

1. 仅在依赖的props变化时执行：对比当前props和prevProps中的Redux数据（tags、categories），只有当这些核心数据变化时才重新执行转换，而非对比组件state。
2. 处理异步竞态：如果组件在异步请求完成前再次更新，要取消之前的请求或忽略旧结果，避免错误覆盖最新状态。
3. 避免无限循环：更新state前要判断新结果是否和当前state真正不同（数组是引用类型，直接===对比不准确，可通过深对比或内容校验判断）。

示例代码：

// 用于保存当前异步请求的引用，方便后续取消
currentConversionPromise: Promise<Array<RichOption>> | null = null;

componentDidUpdate = async (prevProps: Props) => {
    // 仅当Redux中的tags或categories变化时执行转换
    if (prevProps.tags !== this.props.tags || prevProps.categories !== this.props.categories) {
        // 取消未完成的旧请求（需自行实现Promise取消逻辑，或使用AbortController）
        if (this.currentConversionPromise) {
            // 示例：若转换函数支持AbortController，传递信号取消请求
            // abortController.abort();
        }

        try {
            // 保存当前请求引用
            this.currentConversionPromise = Promise
                .allSettled(SearchConditionsDropdownItems.map(this.searchConditionDropdownMenuItemToDropdownOption))
                .then(results => results
                    .filter(result => result.status === "fulfilled")
                    .map(result => (result as PromiseFulfilledResult<RichOption>).value)
                );

            const newOptions = await this.currentConversionPromise;

            // 对比选项内容是否真正变化，避免不必要的setState
            const optionsAreEqual = JSON.stringify(newOptions) === JSON.stringify(this.state.searchConditionDropdownOptions);
            if (!optionsAreEqual) {
                this.setState({ searchConditionDropdownOptions: newOptions });
            }
        } catch (error) {
            console.error(error);
        } finally {
            this.currentConversionPromise = null;
        }
    }
}

// 组件卸载时清理未完成的请求
componentWillUnmount() {
    if (this.currentConversionPromise) {
        // 执行请求取消逻辑
        // abortController.abort();
    }
}

初始化逻辑复用 #

在componentDidMount中执行一次转换，同时复用componentDidUpdate的逻辑，确保初始化和后续更新逻辑一致：

componentDidMount = async () => {
    try {
        await this.cacheDynamicData();
        // 手动触发一次转换，复用componentDidUpdate的判断逻辑
        this.componentDidUpdate({ tags: [], categories: [] } as Props);
        this.setState({ isMounted: true });
    } catch (error) {
        console.error(error);
    }
}

内容的提问来源于stack exchange，提问作者Vincent Teyssier