object.entries 要求输入参数不是 null 或 undefined 反应本机？

Question

我是 React Native 开发和使用 expo-cli 的新手。我添加了一个 react-native-table-component 它工作正常，但现在我正在调用 API，但我正面临该错误

object.entries 要求输入参数不能为 null 或 undefined react native

表是由for循环动态创建的。正如你在下面的代码中看到的：

import React, {useEffect, useState} from 'react';
import { StyleSheet, View,Text, ScrollView } from 'react-native';
import { Table, TableWrapper, Row } from 'react-native-table-component';
import Constants from 'expo-constants';
import Header  from './header';
import axios from 'react-native-axios';
 
const AllData = ({navigation}) => {
    const [dataCSV, setData] =useState([]);
    const pressHandler = ()=>{
        navigation.toggleDrawer();
      }

    useEffect(()=>{
      loadData();
    },[])

    const loadData = async () =>{
      const result = await axios.get("https://hebruapp.herokuapp.com/api/hebru/");
      setData(result.data);
    }


  const state = {
    tableHead: ['שם_מכשיר', 'מספר_סידורי', 'סטטוס', 'גרסת_תוכנה', 'תוכנה', 'מודל', 'גרסת_קושחה', 'הגדרות_תקשורת', 'קוד_איתחול_פינפד','מספר_מסוף','מספר_מסוף',
    'מספר_מוטב',
    'מספר_קופה',
    'שם_בית_העסק',
    'מספר_עוסק',
    'מספר_עוסק_בסליקה',
    'סניף',
    'משווק',
    'תאריך_הקמה',
    'תאריך_גישה_אחרונה_למערכת',
    'איש_קשר',
    'טלפון_איש_קשר',
    'כתובת_מלא'],
    widthArr: [40, 60, 80, 100, 120, 140, 160, 180, 200,180,180,180,180,180,180,180,180,180,180,180,180,180,]
  }
  const tableData = [];
  for (let i = 0; i < 30; i += 1) {
      const rowData = [];
      for (let j = 0; j < 22; j += 1) {
        for (let [key, value] of Object.entries(dataCSV[j])) {
          rowData.push(`${value}`);
        }
      }
      tableData.push(rowData);
    }

    return (
<View>
<Header onPress={pressHandler} title="All Data" />
<View style={styles.containerDatatable}>
        <ScrollView horizontal >
          <View>
            <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
              <Row data={state.tableHead} widthArr={state.widthArr} style={styles.header} textStyle={styles.text}/>
            </Table>
            <ScrollView style={styles.dataWrapper}>
              <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                {
                  tableData.map((rowData, index) => (
                    <Row
                      key={index}
                      data={rowData}
                      widthArr={state.widthArr}
                      style={[styles.row, index%2 && {backgroundColor: '#F7F6E7'}]}
                      textStyle={styles.text}
                    />
                  ))
                }
              </Table>
            </ScrollView>
          </View>
        </ScrollView>
      </View>
</View>
    )
}

const styles = StyleSheet.create({
  containerDatatable: { padding: 16, paddingTop: 10, backgroundColor: '#fff' },
  header: { height: 50,backgroundColor: "radial-gradient(ellipse at left bottom,    rgb(163, 237, 255) 0%,    rgba(57, 232, 255, 0.9) 59%,    rgba(48, 223, 214, 0.9) 100% )",  },
  text: { textAlign: 'center', fontWeight: '100' },
  dataWrapper: { marginTop: -1 },
  row: { height: 40, backgroundColor: '#E7E6E1' },
  dataHeading:{textAlign:'center', fontWeight:'bold', marginBottom:10}

});

export default AllData;

我在这方面面临的错误

for (let [key, value] of Object.entries(dataCSV[j]))

当我传递 j dataCSV[j] 的索引值时的行。

我怎样才能摆脱这个问题？

Answer 1

dataCSV 的初始值为[]。使用该值的代码从不检查 dataCSV 的长度，它只是愉快地从 0 变为 21（包括）。当dataCSV 为[] 时dataCSV[0] 为undefined，这不是传递给Object.entries 的有效值。

解决方案是不要这样做。你不这样做的具体方式取决于代码整体应该做什么，但一种方法是在循环中添加边界检查：

for (let j = 0, len = Math.min(22, dataCSV.length); j < len; j += 1) {
// −−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^−−−−−−^^^