React类组件更新后的state值无法传递给子组件的问题咨询

我在开发页面时，通过props在组件间传递用户数据，父组件到子组件的初始传递正常，但state更新后的数据无法同步到子组件。点击按钮切换到子组件页面时，子组件接收到的仍是初始的UserUid值，而非更新后的值。

父组件相关代码 #

class App extends Component {
  constructor() {
    super();
    this.state = {
      UserUid: "LogIn", // 类的初始状态
      Username: "LogIn",
    };
  }

  // 更新state的函数
  changeID = async (useruid) => {
    console.log("User Uid: " + useruid);
    if (useruid != null) {
      this.setState({ UserUid: useruid });
      let auth = getAuth(app);
      const db = getFirestore(app);
      const docRef = doc(db, "Users", useruid);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        console.log("Document data:", docSnap.data().Username);
        this.setState({ Username: docSnap.data().Username });
      } else console.log("no hay datos");
    } else console.log("Primera vez");
  };    

  // 路由配置
  render() {
    return (
      <Route
        exact
        path="/ListaNFTs"
        element={<ListarNftASubastar UserUid={this.state.UserUid}/>}
      />
    )
  }
}

核心问题 #

state值已在父组件中成功更新，但切换到子组件页面时，子组件接收到的UserUid仍是初始的"LogIn"，而非更新后的值。

解决方案 #

1. 确保路由跳转在state更新完成后执行 #

setState是异步操作，若路由跳转触发在state更新前，会导致传递旧值。可以利用setState的回调函数，等state完全更新后再跳转：

changeID = async (useruid) => {
  console.log("User Uid: " + useruid);
  if (useruid != null) {
    // 先更新UserUid，回调中执行后续逻辑
    this.setState({ UserUid: useruid }, async () => {
      let auth = getAuth(app);
      const db = getFirestore(app);
      const docRef = doc(db, "Users", useruid);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        console.log("Document data:", docSnap.data().Username);
        this.setState({ Username: docSnap.data().Username }, () => {
          // state完全更新后跳转路由
          this.props.history.push("/ListaNFTs");
        });
      } else console.log("no hay datos");
    });
  } else console.log("Primera vez");
};

注：若使用React Router v6，类组件需通过withRouter高阶组件包裹来获取navigate方法，替代history.push。

2. 子组件监听props变化 #

如果子组件未自动响应props更新，需要主动监听：

• 类组件用componentDidUpdate：

class ListarNftASubastar extends Component {
  componentDidUpdate(prevProps) {
    if (prevProps.UserUid !== this.props.UserUid) {
      // props更新后的逻辑处理
      console.log("更新后的UserUid:", this.props.UserUid);
    }
  }
  // ...其他代码
}

• 函数组件用useEffect：

function ListarNftASubastar({ UserUid }) {
  useEffect(() => {
    // UserUid变化时执行逻辑
    console.log("更新后的UserUid:", UserUid);
  }, [UserUid]); // 依赖数组中加入UserUid
  // ...其他代码
}

3. 检查子组件缓存配置 #

如果子组件使用了React.memo做性能优化，需确保比较逻辑包含UserUid，避免因缓存导致不重新渲染：

const ListarNftASubastar = React.memo(({ UserUid }) => {
  // ...组件内容
}, (prevProps, nextProps) => {
  // 仅当UserUid相同时才缓存组件
  return prevProps.UserUid === nextProps.UserUid;
});

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