javascript - React Native : Error :"Cannot read property ' name' of undefined,“虽然包含名称的对象不是未定义的

Question

我是 React 的新手，正在使用 React Native 开发一个项目。我已经使用 fetch 从服务器加载数据，数据可用，如果我控制台它显示，但是当我呈现数据时它显示未定义。从 Angular 背景来看，我知道数据可用于渲染的时间较晚，如果我设置一些条件，那么错误就会消失。我想要的不是对每个变量都设置条件，什么是更好的管理方式，就像我们在 Angular 中对整个内容使用“*ngIf”一样，仅显示如果数据可用。到目前为止，我尝试的内容如下。

获取数据

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



    }

渲染数据

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

因为 fetch 是一个异步调用，所以对于初始渲染我们不会得到任何数据，因此它会抛出错误。因此，为了避免这些异常，我们应该在执行任何操作之前检查这些值。

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