Question

我正在尝试使用fetch调用API，我在手机的黄色框中收到此错误消息：

可能的未处理承诺拒绝（id：0）：无法找到变量resarray1

这是AttendanceDetails类：

'use strict'
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Navigator,
Text,
View
} from 'react-native';
import api from './utilities/api';

export default class AttendanceDetails extends Component {

constructor(props){
    super(props);
    this.state={

        resarray1:[],
        resarray2:[],
        total:'',
        present:'',
        absent:'',
        off:'',
        unmarked:'',
        totalHours:'',
        averageHours:'',
        greater12Hours:'',
        less8hours:''
    }
}

componentWillMount(){

    api.getAttendanceDetails().then((res)=>{
        this.setState({

            resarray1: res.data.attendance_details,
            resarray2: res.data.attendance_summary,
            total:resarray1[0].value,
            present:resarray1[1].value,
            absent:resarray1[2].value,
            off:resarray1[3].value,
            unmarked:resarray1[4].value,
            totalHours:resarray2[0].value,
            averageHours:resarray2[1].value,
            greater12Hours:resarray2[2].value,
            less8hours:resarray2[3].value

        })
    }); 
}

render() {
// console.log('details: ',this.state.resarray1,this.state.resarray2,this.state.less8hours)
return (
  <View style={styles.container}>

  <View>
  <Text>
  Attendance Summary
  </Text>
  </View>

  <View style={styles.containerRow}>

   <Text style={styles.welcome}>
    {this.state.total}
  </Text>

  </View>

  <View style={styles.containerRow}>

   <Text style={styles.welcome}>
    {this.state.present}
  </Text>

  </View>

  <View style={styles.containerRow}>

   <Text style={styles.welcome}>
    {this.state.absent}
  </Text>

  </View>

  <View style={styles.containerRow}>

   <Text style={styles.welcome}>
    {this.state.off}
  </Text>

  </View>

  <View style={styles.containerRow}>

   <Text style={styles.welcome}>
    {this.state.unmarked}
  </Text>

  </View>


  <View>
  <Text>
  Hourly Summary
  </Text>
  </View>

  <View style={styles.containerRow}>

   <Text style={styles.welcome}>
    {this.state.totalHours}
  </Text>

  </View>

  <View style={styles.containerRow}>

   <Text style={styles.welcome}>
    {this.state.averageHours}
  </Text>

  </View>

  <View style={styles.containerRow}>

   <Text style={styles.welcome}>
    {this.state.greater12Hours}
  </Text>

  </View>


  <View style={styles.containerRow}>

   <Text style={styles.welcome}>
    {this.state.less8hours}
  </Text>

  </View>
  </View>
)
}
}

这是api.js

var api={
    getAttendanceDetails(){
        var url='http://www.myurl.com';
        return fetch(url).then((res)=>res.json());
    }
};
module.exports = api;

Answer 1

首先，您不需要对您的州进行重新分配：

this.state={
    total:'',
    present:'',
    absent:'',
    off:'',
    unmarked:'',
    totalHours:'',
    averageHours:'',
    greater12Hours:'',
    less8hours:''
};

其次，total:resarray1[0].value是错误的，因为没有在该上下文中定义resarray1：

componentWillMount(){
    api.getAttendanceDetails().then((res)=>{
        const resarray1 = res.data.attendance_details;
        const resarray2 = res.data.attendance_summary;
        this.setState({
            total:resarray1[0].value,
            present:resarray1[1].value,
            absent:resarray1[2].value,
            off:resarray1[3].value,
            unmarked:resarray1[4].value,
            totalHours:resarray2[0].value,
            averageHours:resarray2[1].value,
            greater12Hours:resarray2[2].value,
            less8hours:resarray2[3].value

        })
    }); 
}

BTW，你也可以在RN中使用async / await：

componentWillMount() {
    this.load();
}

async load(){
    const res = await api.getAttendanceDetails();
    const resarray1 = res.data.attendance_details;
    const resarray2 = res.data.attendance_summary;
    this.setState({
        total:resarray1[0].value,
        present:resarray1[1].value,
        absent:resarray1[2].value,
        off:resarray1[3].value,
        unmarked:resarray1[4].value,
        totalHours:resarray2[0].value,
        averageHours:resarray2[1].value,
        greater12Hours:resarray2[2].value,
        less8hours:resarray2[3].value
    });
}

React native fetch api，可能未处理的Promise Rejection（id：0）：无法找到变量resarray1

1 个答案: