React Native：错误：“无法读取未定义的属性‘名称’，”虽然包含名称的对象不是未定义的

Question

I am new to react and working on a project in react native. I have loaded data from the server using fetch, Data is available, if i console it shows up, but when i render the data it show undefined. Being from angular background i know the data is available late for rendering, if i put some conditions then the error will go away. What i want is not to put condition on every single variable, What is the better way to manage it like we use " *ngIf " in Angular on whole content, show only if data is available. what i tried so far is below.

Fetching Data

componentDidMount() {
this._fetchData();


}

  _fetchData = () => {
    if (this.state.loading) { return; }
    this.setState({ loading: true });
    let typr = this._returnReqType(this.state.requestType)
    let include = [
      'application',
      'association:id,name',
      'unit:id,unit_number',
      'status_history',
      'status_history.user',
    ];
    EservicesService.getEservicesRequestDetails(this.state.requestId, typr, include).then(response => {
      console.log(response.record); // {prop1:'XXXXXXX',association:{name:'Association 1', ...}, ... }
      console.log(response.record.association); // {name:'Association 1', ...}
      this.setState({
        error: response.error || null,
        loading: false,
        request: response.record
      });

    }).catch(error => {
      this.setState({ error, loading: false });
    });



    }

Rendering Data

render() {
console.log(this.state.request); // {prop1:'XXXXXXX',association:{name:'Association 1', ...}, ... }
console.log(this.state.request.association); // {name:'Association 1', ...}
return (
  <View style={{ flex: 1 }}>
    <ScrollView>
      <Card >
        <Text>Association: {this.state.request.association_id}</Text>
        <Text>Unit: {this.state.request.association.name}</Text> {// Error Here "Cannot read 'name' of undefined" 
        }
      </Card>
    </ScrollView>
  </View>
);}

Answer 1

Since fetch is an async call, So for initial render we wont get any data and hence it is throwing error. So in order to avoid these exceptions we should check for the values before doing any operation.

render() {
console.log(this.state.request); // {prop1:'XXXXXXX',association:{name:'Association 1', ...}, ... }
const {request} = this.state;
console.log(request.association); // {name:'Association 1', ...}
return (
  <View style={{ flex: 1 }}>
    <ScrollView>
      <Card >
        <Text>Association: {request.association_id && request.association_id}</Text>
        <Text>Unit: {request.association.name && request.association.name}</Text> {// Error Here "Cannot read 'name' of undefined" 
        }
      </Card>
    </ScrollView>
  </View>
);}

Answer 2

You need to check if the name is available, then render it.

{ this.state.request.association && <Text>
 Unit: {this.state.request.association.name && this.state.request.association.name}
</Text>
}

Answer 3

To prevent "falsy" render while fetching the data, you could simply put check for loading state in render function. Like this:

render() {
  if (this.state.loading) {
    return null
  }

  return <>Your fetched data</>
}