在将数据加载到 this.state（即在 componentDidMount 中）之前，如何防止函数运行？

Question

I have a function getRepresentativeName() which uses a piece of data ( this.state.communityData.Representative ) from this.state to index into a database and retrieve a string. My intent is that when the component mounts, all of the information in this.state , including this.state.communityData.Representative , will be populated and the representative's name will appear in the location set off by {...} . However, the function runs immediately when the first render is called and does not wait for the component to mount; as a result, since this.state is not populated yet, the getRepresentativeName function crashes.

I placed a ternary statement to check whether the communityData JSON object has been filled (the logic being that if it is not filled, ie === {}, just return null instead of executing getRepresenativeName()) ; Interestingly enough, the page crashes regardless (with the same issue: getRepresenativeName() is being called before this.state is populated in componentDidMount() ).

Can someone explain to me why this is happening, and how I could resolve this situation without adding redundant data to this.state ? I'm not sure if this is the way to solve it, but I thought that the problem could be solved if there was a way to make the getRepresentativeName() function wait until componentDidMount() finishes. Thank you!

Note: If I do not call the function and just replace the {...} with {this.state.communityData.Representative} , which fills the element with the Representative ID as opposed to the name, the page renders perfectly. In addition, I tried making getRepresentative name a callback, and that still didn't work (ie the page still crashed when it tried to render).

  async getRepresentativeName() {
    const representativeSnapshot = await database()
      .ref('users')
      .child(this.state.communityData.Representative)
      .child('name')
      .once('value');
    return representativeSnapshot.val();
  };

  render() {
    console.log('starting render');
    return (
      <View style={styles.containerScreen} testID="communityScreen">
        {/*
            This the container that holds the community Image
            and its description,
            */}
        <View style={styles.containerhorizontal}>
          <View style={styles.containervertical}>
            <Image
              source={require('../../sample_images/va10.jpg')}
              style={styles.image}
            />
          </View>
          <View style={styles.containervertical}>
            <Text style={styles.containerhorizontal}>
              Description: {this.state.communityData.Description}
            </Text>
            <Text style={styles.containerhorizontal}>
              Representative: **{this.state.communityData !== {} ?this.getRepresentativeName() : null}**
            </Text>
            ...

Answer 1

The typical pattern here is initialize your state with some kind of loading property. Then, asynchronously load data based on input from the user interface. That input could be from the user or it could be from lifecycle events. In this case, componentDidMount. Your component should know how to render when loading is true and when data is available.

class MyComponent extends React.Component {
  state = {loading: true, error: null, representative: null}

  componentDidMount() {
    fetchData().then((representative) => {
      this.setState({ loading: false, representative })
    }).catch((error) => {
      this.setState({ loading: false, error: error.message })
    })
  }

  render() {
    return this.state.error 
    ? <span>woops</span>
    : this.state.loading
    ? <span>busy</span>
    : <div>Representative: {this.state.representative.name}</div>
  }
}