渲染在异步方法结束之前运行。 如何将道具从我的异步方法传递给组件？

Question

I neet to pass data from firestore into my components. But request is async so i stuck on problem when my render method runs before i get data from my request. So when the render runs the pops value is Null because state is not defined yet. Also component for some reason renders twice. Is there any better way to handle async stuff?

Already tried po put request to firestore in higher place (index.js) and pass data down to app. Tried to make request inside render method. Tried to put request inside async function and call it in constructor to set state there. Same thing as calling async method.

class App extends Component {
constructor(props) {
    super(props);
    this.giveUsername = this.giveUsername.bind(this);

    const userId = firebase.auth().currentUser.email;
    this.giveUsername(userId);
}

async giveUsername(userId){
    let username;
    await firebase.firestore().collection('users').where('email', '==', userId).get().then((snapshot) =>{
        snapshot.docs.forEach(doc =>{
            console.log(`doc.data().username - ${doc.data().username}`);
            username = doc.data().username;
        });
    });
    this.setState( {
        userId : userId,
        username : username
    });
 }

render() {
    return (
      <div className='App'>
        <Header username={this.state.username}/>
        <NewTask userId={this.state.userId}/>
        <TaskList userId={this.state.userId}/>
      </div>
    );
}
}

Answer 1

The convention is typically to call functions that will set your components up from componentDidMount() , rather than the constructor() method.

Also, the async await in your giveUsername() function is not waiting for the Promise.then() . The solution is to use either , rather than both.

Setting an initial value for this.state is also recommended when dealing with indeterminate data.

See below for a practical example.

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      username: undefined,
      userId: undefined
    };
    this.giveUsername = this.giveUsername.bind(this);
  }

  render() {
    return (
      <div className="App">
        <Header username={this.state.username}/>
        <NewTask userId={this.state.userId}/>
        <TaskList userId={this.state.userId}/>
      </div>
    );
  }

  componentDidMount() {
    const userId = firebase.auth().currentUser.email;
    this.giveUsername(userId);
  }

  async giveUsername(userId) {
    let username;
    const snapshot = await firebase.firestore().collection('users').where('email', '==', userId).get();
    snapshot.docs.forEach(doc => {
      console.log(`doc.data().username - ${doc.data().username}`);
      username = doc.data().username;
    });
    this.setState({userId : userId, username : username});
  }

}

Answer 2

Render will run before you get your data, that's totally normal and correct. Check if the data is null and render a loading message or nothing ( return null )

Answer 3

you should initialize the state in the constructor so your component renders properly even without data, and add a loading key to know when the data are ready, and it would be useful to show a pinner

constructor(props) {
    super(props);
    state = {
      userId : 0,
      username : '',
      loading: true
    }
}

set the loading to false when data are are ready :

async giveUsername(userId){
    ...
    this.setState( {
        userId : userId,
        username : username,
        loading: false
    });
 }

Render :

render() {
    return (
      <div className='App'>
        {this.state.loading 
         ? <span>Loading ... </span> 
         : (
             <Header username={this.state.username}/>
             <NewTask userId={this.state.userId}/>
             <TaskList userId={this.state.userId}/>
           )
        }
      </div>
    );
}

and the reason why the component is rendering twince is because the state is changing and that's normal.

Answer 4

The general thing to understand when making requests is that, it's expected that there won't be any data at the start of your component and there is nothing you can do about that.

Best practices is to let the user know that the data is loading.

constructor(){
  this.state = {username: null, userId: null, loaded: false};
}
render() {
    return (
      <div className='App'>
        {
           !this.state.loaded ? <p>Loading...</p> : 

              <Header username={this.state.username}/>
              <NewTask userId={this.state.userId}/>
              <TaskList userId={this.state.userId}/>
        }
      </div>
    );
}

Do not do fetch requests in your controller ! Use componentDidMount

componentDidMount(){
    const userId = firebase.auth().currentUser.email;
    this.giveUsername(userId);
}

Then finally in giveUsername

async giveUsername(userId){
    let username;
    await firebase.firestore().collection('users').where('email', '==', userId).get().then((snapshot) =>{
        snapshot.docs.forEach(doc =>{
            console.log(`doc.data().username - ${doc.data().username}`);
            username = doc.data().username;
        });
    });
    this.setState( {
        userId : userId,
        username : username,
        loaded: true
    });
 }