React组件props传递异常：Dashboard的componentDidMount无法获取props值

问题根源 #

你的代码出现这个问题的核心原因是：Dashboard组件挂载时，App组件的state还没完成异步更新。

具体来说：

1. React的setState是异步操作，App组件的componentDidMount里多次调用setState，不会立即同步更新state；
2. 当App的isSignedIn变为true时，Dashboard就会被渲染，但此时email的state可能还没更新完成，导致Dashboard第一次挂载时props.email是初始的undefined；
3. 后续App的state更新完成后，Dashboard会重新render，所以render方法里能拿到正确的email，但componentDidMount只执行一次，控制台打印的自然是第一次挂载时的undefined。

解决方案 #

方案1：用componentDidUpdate监听props变化

componentDidMount只在组件挂载时执行一次，而componentDidUpdate会在props或state更新时触发，我们可以在这里处理AJAX逻辑：

修改Dashboard.js：

import React, { Component } from 'react';
class Dashboard extends Component {
  componentDidMount() {
    // 先检查初始props是否有值
    if (this.props.email) {
      console.log(this.props.email);
      // 执行AJAX逻辑
    }
  }

  componentDidUpdate(prevProps) {
    // 只有当email发生变化且不为空时，才执行AJAX
    if (this.props.email !== prevProps.email && this.props.email) {
      console.log(this.props.email);
      // 这里写你的AJAX处理代码
    }
  }

  render() {
    const email = this.props.email
    return (
      <div>
        <h1>Hello, {this.props.displayName}!</h1>
        <h2>Your email is: {email}</h2>
      </div>
    );
  }
}
export default Dashboard;

方案2：确保App组件在state完全更新后再渲染Dashboard

修改App.js的render部分，只有当isSignedIn和email都存在时，才渲染Dashboard：

{this.state.isSignedIn && this.state.email && // 增加email存在的判断
  <div>
    <Dashboard displayName={this.state.displayName} email={this.state.email} />
  </div>
}

同时，建议把App组件中多次setState合并成一次，提升性能且避免异步更新的混乱：

componentDidMount() {
  // 假设user是你从Firebase获取的用户对象
  const userData = user.providerData[0];
  this.setState({
    isSignedIn: true, // 记得设置isSignedIn为true，原代码里缺失这一步
    displayName: userData.displayName,
    email: userData.email
  });
}

额外提示 #

如果后续考虑升级到React函数组件，可以用useEffect钩子，依赖项设置为props.email，写法更简洁：

import React, { useEffect } from 'react';

const Dashboard = (props) => {
  useEffect(() => {
    if (props.email) {
      console.log(props.email);
      // 执行AJAX逻辑
    }
  }, [props.email]); // 只有当email变化时才执行

  return (
    <div>
      <h1>Hello, {props.displayName}!</h1>
      <h2>Your email is: {props.email}</h2>
    </div>
  );
};

export default Dashboard;

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