Reactjs 将道具传递到组件上

能够在我的仪表板组件中呈现道具，无法将其传递给componentDidMount进行进一步的ajax处理

渲染工作正常并显示信息

我使用的是firebase，工作正常

App.js

// React core.
import React, { Component } from 'react';
import Dashboard from './components/Dashboard';

class App extends Component {

 //firebase...

  state = {
    isSignedIn: undefined,
    displayName: undefined,
    email: undefined
  };

  componentDidMount() {

      this.setState({providerData: user.providerData}) 
      this.setState({ displayName: user.providerData[0].displayName })  
      this.setState({ email: user.providerData[0].email })   
    });
  }

  render() {
    return (

      <div className={styles.container}>
        {this.state.isSignedIn !== undefined && !this.state.isSignedIn &&
          //Not signed-in yet
          <div>

            <Login />

          </div>
        }

        {this.state.isSignedIn &&
          //Signed in
          <div>
            <Dashboard 
              displayName={this.state.displayName} 
              email={this.state.email} />

          </div>
        }   
      </div>
    );
  }
}

export default App;

//React core。
从“React”导入React，{Component}；
从“./components/Dashboard”导入仪表板；
类应用程序扩展组件{
//火基。。。
状态={
isSignedIn：未定义，
显示名称：未定义，
电子邮件：未定义
};
componentDidMount（）{
this.setState（{providerData:user.providerData}）
this.setState（{displayName:user.providerData[0].displayName}）
this.setState（{email:user.providerData[0].email}）
});
}
render（）{
返回(
{this.state.isSignedIn！==未定义&&！this.state.isSignedIn&&
//尚未登录
}
{this.state.isSignedIn&&
//签到
}   
);
}
}
导出默认应用程序；

Dashboard.js

import React, { Component } from 'react';


class Dashboard extends Component {


    componentDidMount() {
        var thisComponent = this
        console.log(thisComponent.props.email)
    }

    render()  {
        const email = this.props.email

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

export default Dashboard;

import React，{Component}来自'React'；
类仪表板扩展组件{
componentDidMount（）{
var thisComponent=this
console.log（thisComponent.props.email）
}
render（）{
const email=this.props.email
返回(
你好，{this.props.displayName}！
您的电子邮件是：{email}
);
}
}
导出默认仪表板；

Dashboard.js中的componentDidMount让我大吃一惊。无法为进一步的ajax进程发送电子邮件值。 应该是在控制台中获取电子邮件，而我得到的是“未定义”

---

发生在您身上的事情的唯一情况是，如果

电子邮件是从某个异步调用发出的。事情就是这样发生的：

电子邮件
是一种
未定义的状态。但是您进行了一个异步调用以获取
电子邮件

您呈现组件，但是由于异步调用尚未完成，
email
是
undefined
，因此您可以在
componentDidMount
中控制台
undefined
然后，您从异步调用setState of email中得到结果，它将转到props，并使用正确的电子邮件重新启动
仪表板

这样，您可以看到呈现的电子邮件，但在
componentDidMount
中它是未定义的。它渲染了2次，仅在几秒钟内，在组件已装载后，您将收到正确的
电子邮件

这是唯一一种可以看到数据的情况，但是在
componentDidMount
中它是未定义的，我几乎可以肯定这就是您的情况

您几乎没有提供任何代码来解决您的问题，我唯一能做的就是通过对您的案例进行一些假设来说明问题的原因。希望这有助于你理解你的问题并解决它

编辑：在您的代码中，您使用firebase（异步调用）接收电子邮件，因此我的假设是正确的，现在只需要知道预期结果是什么

编辑：
如果您需要在组件内部使用电子邮件执行某些操作，请使用

对于你的情况，你可以这样做

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.email != undefined && this.props.email !== prevProps.email) {
    // Do what you want with email
  }
}

您是否确实在该组件首次装载时将
电子邮件
道具传递给该组件？您能否分享您传递道具的方式示例：-是的，它确实按预期显示在标记中。。。但无法在组件中再次引用。请显示获取电子邮件的代码，并在道具中传递电子邮件。使用当前代码，无法解决您的问题创建构造函数和
super（props）
这很有意义，在异步渲染后如何传递值？（对不起，还没有咖啡：/）你所说的
是什么意思？在异步渲染之后我会传递值吗？我不明白你的问题。第一条评论中的固定语法你想如何处理
仪表板中的
电子邮件
？我需要使用email值在componentDidMount中最终进行axios调用，您可以从中了解很多。