Question

我是新来的人，我正在React Native中从事项目。我已经使用fetch从服务器加载了数据，如果我显示了控制台，则数据可用，但是当我渲染数据时，它显示为未定义。从背景角度来看，我知道数据可以后期渲染，如果我提出一些条件，那么错误就会消失。我想要的是不对每个变量都加上条件，有什么更好的方法来管理它，就像我们在整个内容的 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

由于提取是异步调用，因此对于初始渲染，我们将不会获取任何数据，因此会引发错误。因此，为了避免这些异常，我们应该在执行任何操作之前检查这些值。

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

您需要检查名称是否可用，然后进行渲染。

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

Answer 3

为防止在获取数据时出现“虚假”渲染，您可以简单地将检查加载状态放在render函数中。像这样：

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

  return <>Your fetched data</>
}

React Native：错误：“无法读取未定义的属性“名称”，”尽管包含名称的对象并非未定义

3 个答案: