передача реквизитов в componentDidMount

Question

Может отображать реквизиты в моем компоненте Dashboard, не может передать его в 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;

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;

componentDidMount в Dashboard.js - это то, что сбивает меня с толку.Невозможно отправить значение электронной почты для дальнейшего процесса AJAX.Должно быть, я получаю письмо в консоли, вместо этого я получаю "undefined".

Answer 1

Единственный случай, когда с вами может случиться то, что email приходит от какого-то асинхронного вызова.Вот как это происходит:

1. email - это состояние undefined.Но вы делаете асинхронный вызов, чтобы получить email.
2. . Вы визуализируете компоненты, но email - это undefined, потому что асинхронный вызов еще не завершен, поэтому вы утешаете undefined в * 1013.*.
3. Затем вы получаете результат асинхронного вызова setState электронной почты, он переходит в подпорки и перерисовывает Dashboard с правильным адресом электронной почты.

Таким образом,вы видите письмо обработанным, но в componentDidMount оно не определено.Он рендерится 2 раза и только за секунды, после того, как компонент уже смонтирован, вы получаете правильный email.

Это единственный случай, когда вы можете видеть данные, но они не определены в componentDidMount и я почти уверен, что это ваш случай.

Вы почти не предоставили код для решения вашей проблемы, и единственное, что я могу сделать, это сообщить вам причину вашей проблемы, сделав некоторые предположения о вашемдело.Надеюсь, что это поможет вам понять вашу проблему и решить ее.

Редактировать: В вашем коде вы получаете электронную почту, используя firebase (асинхронный вызов), поэтому мои предположения верны, теперь просто нужно знать, каковы ожидаемые результаты.

Редактировать: Если вам нужно выполнить какое-либо действие с электронной почтой внутри компонента, используйте componentDidMount

Для вашего случая вы можете сделать

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
  }
}