React中无法获取旧props值，需在生命周期设置DetailsList动态列

我来帮你搞定这个动态列的问题！你之前在render里直接写三元判断虽然能跑，但确实不够优雅，而且想移到生命周期里却踩了坑——主要是没覆盖所有场景，也没正确用React的状态管理来维护列配置。下面给你两种靠谱的实现方式，都能替代render里的写法：

方式一：用componentDidUpdate + 组件状态（更直观） #

首先，我们把列配置放到组件的state里，然后在componentDidMount和componentDidUpdate里根据props的变化来更新状态，这样render里就能直接用state里的列了。

步骤1：初始化状态 #

在构造函数里给state添加columns和跟踪类型的字段，避免重复更新：

constructor(props: ISolutionSubcomponentListProps) {
  super(props);
  // 初始化列配置：如果已有数据就根据类型生成，否则用默认列
  const hasItems = props.solutionSubcomponents.length > 0;
  const initialColumns = hasItems 
    ? (props.solutionSubcomponents[0].subcomponentType.logicalName === SolutionComponentTypes.EntityRelationship.logicalName 
      ? this.buildRelationshipColumns() 
      : this.buildColumns())
    : this.buildColumns();

  this.state = {
    columns: initialColumns,
    currentSubcomponentType: hasItems ? props.solutionSubcomponents[0].subcomponentType.logicalName : ''
  };
}

步骤2：优化componentDidUpdate逻辑 #

原来的逻辑漏掉了“从空数据变为有数据”的场景，现在我们覆盖所有可能的变化：

public componentDidUpdate(prevProps: ISolutionSubcomponentListProps): void {
  const currentHasItems = this.props.solutionSubcomponents.length > 0;
  const prevHasItems = prevProps.solutionSubcomponents.length > 0;

  // 场景1：当前有数据，之前没有 → 初始化列
  if (currentHasItems && !prevHasItems) {
    this.updateColumns();
  }
  // 场景2：前后都有数据，但组件类型变化了 → 更新列
  else if (currentHasItems && prevHasItems) {
    const currentType = this.props.solutionSubcomponents[0].subcomponentType.logicalName;
    const prevType = prevProps.solutionSubcomponents[0].subcomponentType.logicalName;
    if (currentType !== prevType) {
      this.updateColumns();
    }
  }
  // 场景3：当前没有数据，之前有 → 重置回默认列（可选，看业务需求）
  else if (!currentHasItems && prevHasItems) {
    this.setState({ 
      columns: this.buildColumns(),
      currentSubcomponentType: ''
    });
  }
}

// 提取单独的更新列方法，复用逻辑
private updateColumns(): void {
  const currentType = this.props.solutionSubcomponents[0].subcomponentType.logicalName;
  const newColumns = currentType === SolutionComponentTypes.EntityRelationship.logicalName 
    ? this.buildRelationshipColumns() 
    : this.buildColumns();
  
  this.setState({
    columns: newColumns,
    currentSubcomponentType: currentType
  });
}

步骤3：简化render方法 #

现在render里直接用state的列就行，不用再写复杂的判断：

render() {
  return (
    <DetailsList
      isLoading={isLoading(this.props.loadProgress)}
      items={this.props.solutionSubcomponents}
      columns={this.state.columns}
      renderOnEmpty={() => {
        const props = this.getPropsOnEmpty();
        return <EmptyState {...props} />;
      }}
      filter={this.props.searchFilter}
      renderOnEmptySearch={() => {
        const props = this.getPropsOnEmptySearch();
        return <EmptyState {...props} />;
      }}
    />
  );
}

方式二：用getDerivedStateFromProps（React推荐的类组件数据流方式） #

如果你更遵循React的最佳实践，getDerivedStateFromProps是专门用来处理props到state映射的静态方法，适合这种依赖props动态更新状态的场景：

步骤1：更新状态初始化 #

constructor(props: ISolutionSubcomponentListProps) {
  super(props);
  const hasItems = props.solutionSubcomponents.length > 0;
  const currentType = hasItems ? props.solutionSubcomponents[0].subcomponentType.logicalName : '';
  this.state = {
    columns: hasItems 
      ? (currentType === SolutionComponentTypes.EntityRelationship.logicalName 
        ? this.buildRelationshipColumns() 
        : this.buildColumns())
      : this.buildColumns(),
    currentSubcomponentType: currentType
  };
}

步骤2：实现getDerivedStateFromProps #

这个方法会在props或state变化时触发，返回新的state或者null（不需要更新时）：

public static getDerivedStateFromProps(
  nextProps: ISolutionSubcomponentListProps,
  prevState: { columns: IColumn[], currentSubcomponentType: string }
) {
  const hasItems = nextProps.solutionSubcomponents.length > 0;

  // 没有数据时，重置为默认列
  if (!hasItems) {
    return {
      columns: this.buildColumns(),
      currentSubcomponentType: ''
    };
  }

  const currentType = nextProps.solutionSubcomponents[0].subcomponentType.logicalName;
  // 如果类型没变，不需要更新状态
  if (prevState.currentSubcomponentType === currentType) {
    return null;
  }

  // 类型变化，生成新的列
  const newColumns = currentType === SolutionComponentTypes.EntityRelationship.logicalName 
    ? this.buildRelationshipColumns() 
    : this.buildColumns();
  
  return {
    columns: newColumns,
    currentSubcomponentType: currentType
  };
}

步骤3：同样简化render方法 #

和方式一一样，render里直接用this.state.columns即可。

为什么这两种方式更好？ #

1. 符合React单向数据流：用state管理列配置，而不是直接修改this.columns，避免了组件状态混乱。
2. 覆盖所有场景：从无数据到有数据、类型切换、有数据到无数据的情况都处理到了，不会出现之前的逻辑漏洞。
3. 代码更易维护：把列更新的逻辑提取出来，render方法更简洁，后续修改列逻辑只需要改对应方法就行。

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