React组件接收新Props后DOM未更新问题求助

我正尝试实现一个三层架构的React应用，但父组件向子组件传递不同输入时，出现DOM未更新的问题。

示例代码 #

API调用组件（ApiCall） #

export const ApiCall = (props) => {
  const { loading, error, data } = useQuery(ExampleQuery, {
    variables: { where: { "id": props.id } },
  });

  if (loading) return "Loading...";
  if (error) return "Error: Something went wrong";

  return (
    <div key={props.id}>
      <ExampleContainer data={data}/>
    </div>
  )
};

容器类组件（ExampleContainer） #

import React, { Component } from "react";

export class ExampleContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            state: "",
        };
    }

    componentDidMount(){
        if(this.props.data.example.length === 0){
            this.onChangeState("DEFAULT");
          } else {
            this.onChangeState("SHOW");
          }
    }

    onChangeState = (state) => 
      this.setState({state:state});

    render() {
        const state = this.state.state;
        console.log(state);
        switch (state) {
            case "DEFAULT":
                return (
                    <div key="DEFAULT">
                        <label>DEFAULT</label>
                    </div>
                )
            case "SHOW":
                console.log("it gets here but does not update");
                return (
                    <div key="SHOW">
                        <label>Show something</label>
                    </div>
                )
            default:
                return null;
        }
    }
}

问题现象 #

初始输入数据为空时，容器组件切换到"DEFAULT"状态并显示对应内容；但当发起请求传递新数据后，状态切换为"SHOW"，控制台也打印了对应日志，但DOM仍显示DEFAULT。此外，将onChangeState传递给View组件时状态变更正常。

核心原因 #

ExampleContainer作为类组件，只在首次挂载时执行componentDidMount来同步props到state。当父组件传递新的data props时，组件已经完成挂载，componentDidMount不会再次触发，导致内部state没有跟着新props更新——哪怕你看到控制台打印了日志，那可能是测试时手动触发的状态变更，正常流程下新props并没有驱动state更新。

解决方案 #

方案1：添加componentDidUpdate监听props变化 #

在类组件中新增componentDidUpdate生命周期，对比新旧props，当data.example变化时重新更新state：

componentDidUpdate(prevProps) {
  // 仅在data.example变化时执行，避免无效更新
  if (prevProps.data.example !== this.props.data.example) {
    this.onChangeState(
      this.props.data.example.length === 0 ? "DEFAULT" : "SHOW"
    );
  }
}

方案2：直接用props渲染，去掉内部state #

既然组件的显示完全由props决定，没必要额外维护state，直接在render里根据props判断即可，从根源避免props和state不同步的问题：

render() {
  const hasData = this.props.data.example.length > 0;
  console.log(hasData ? "SHOW" : "DEFAULT");
  
  if (hasData) {
    console.log("it gets here and will update");
    return (
      <div key="SHOW">
        <label>Show something</label>
      </div>
    )
  } else {
    return (
      <div key="DEFAULT">
        <label>DEFAULT</label>
      </div>
    )
  }
}

方案3：转成函数组件（推荐） #

换成函数组件，用useEffect监听props变化，逻辑更简洁直观：

import React, { useState, useEffect } from "react";

export const ExampleContainer = (props) => {
  const [state, setState] = useState("");

  useEffect(() => {
    setState(
      props.data.example.length === 0 ? "DEFAULT" : "SHOW"
    );
  }, [props.data.example]); // 仅在data.example变化时触发

  console.log(state);
  switch (state) {
    case "DEFAULT":
      return (
        <div key="DEFAULT">
          <label>DEFAULT</label>
        </div>
      )
    case "SHOW":
      console.log("it gets here and will update");
      return (
        <div key="SHOW">
          <label>Show something</label>
        </div>
      )
    default:
      return null;
  }
};

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