Question

在尝试遍历从ReactJs中从数据库中检索到的对象数组时，我总是会收到此错误

this.state.getCourse.map is not a function. (In 'this.state.getCourse.map(function (y) {
(Device)
        _react.default.createElement(_reactNative.Text, null, y.fullname);
      })', 'this.state.getCourse.map' is undefined)

我不知道为什么总是总是出现此错误，就像我只是使用

<Text>{this.state.getCourse}</Text>

它将以这种数组对象格式显示保存的对象

[{"fullname": "Gbenga", "mail": "t@j.com"},{"fullname": "Femi", "mail": "ht@h.com"}]

但是如果我遍历它，它总是返回上述错误。

这是我到目前为止所做的。

// screens/Attendance.js

import React, { Component } from 'react';
import { Button, View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

class Attendace extends Component {

 constructor() {
    super();
    this.state = {
      getCourse: [],
    };
  }

  async componentDidMount(){
    try {
      await AsyncStorage.getItem('course').then(value =>
        //AsyncStorage returns a promise so adding a callback to get the value
        this.setState({ getCourse: value })
        //Setting the value in Text 
      );
      } catch (e) {
      alert(e);
    }
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
        <Text>Attendance screen</Text>
         {
           this.state.getCourse.map((y) => {
             <Text>{y.fullname}</Text>
           })
         } // This will not work
        <Text>{this.state.getCourse}</Text>// This will display the array in a json format
      </View>
    );
  }
}

export default Attendace;

Answer 1

您正在从地图函数返回一个对象。您需要添加return或仅使用短箭头语法，如下所示：

<Text>Attendance screen</Text>
         {
           this.state.getCourse.map((y) => <Text>{y.fullname</Text>)
         } // notice the lack of {}, if you dont like this syntax just add a return before <Text ;

此外，在修复此问题之后，React也会抱怨缺少键，因此要么添加索引值（如果数组可以更改，通常不建议这样做），要么使用数据源中的某些唯一值。

Answer 2

您总是将字符串保存到异步存储中，所以请执行JSON.parse

 await AsyncStorage.getItem('course').then(value =>
        //AsyncStorage returns a promise so adding a callback to get the value
        this.setState({ getCourse: JSON.parse(value) })
        //Setting the value in Text 
      );

根据您当前的代码，您尝试在导致错误的字符串上调用map函数，并且在显示该错误时看不到引号。

render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
        <Text>Attendance screen</Text>
         {
           this.state.getCourse.map((y) => {
            return (<Text>{y.fullname}</Text>)
           })
         } // This will not work
        <Text>{JSON.stringify(this.state.getCourse)}</Text>// This will display the array in a json format
      </View>
    );

}

Answer 3

AsyncStorage.getItem('course')返回一个对象，您不能在该对象上循环，而是可以直接访问fullname,course,email 并在您的UI中使用它们。

async componentDidMount(){
    try {
      await AsyncStorage.getItem('course').then(value =>
          const course = JSON.parse(value)
          if(course ) this.setState({ getCourse: course } )
      );
      } catch (e) {
      alert(e);
    }
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
        <Text>{this.state.getCourse.fullname }</Text>
        <Text>{this.state.getCourse.mail}</Text>
        <Text>{this.state.getCourse.course}</Text>

      </View>
    );
  }

ReactJs：无法使用map循环遍历对象数组

3 个答案: