React Native：TypeError：undefined不是一个对象（评估'_this.props.data.map'）

我想知道React Native是否有一个需要修复的错误，该错误给出了以下错误：

React Native：TypeError：undefined不是一个对象（评估'_this.props.data.map'）

我非常擅长此事，但是我似乎无法解决为什么将这个组件放在一起时会出现此错误：

import React, { Component } from "react";
import { View, Animated } from "react-native";

class Swipe extends Component {
  renderCards() {
    return this.props.data.map(item => {
      return this.props.renderCard(item);
    });
  }

  render() {
    return <View>{this.renderCards()}</View>;
  }
}

export default Swipe;

我已经通过各种调试实践检查并再次检查了问题是否出在我的动作创建者或减速器上，并且在进行各种重构之后，我发现它们可以正常工作。

我决定从头开始做上述组件，而在我重用另一个组件之前，我仍然遇到上述错误。

我问这是否是RN的错误，因为其他人也发布了类似的问题，但是他们没有得到所需的答案。

这不是范围问题，this因为如果我这样重构它：

renderCards = () => {
    return this.props.data.map(item => {
      return this.props.renderCard(item);
    });
  };

它对我绝对没有任何作用，同样的错误消息。消息不是对象也令人困惑，它是一个数组，map()并且只能迭代数组，因此不能确定不是对象的对象。

在此屏幕中正在调用以上组件：

import React, { Component } from "react";
import { View, Text } from "react-native";
import { connect } from "react-redux";
import Swipe from "../components/Swipe";

class DeckScreen extends Component {
  renderCard(job) {
    return (
      <Card title={job.title}>
        <View style={styles.detailWrapper}>
          <Text>{job.company}</Text>
          <Text>{job.post_date}</Text>
        </View>
        <Text>
          {job.description.replace(/<span>/g, "").replace(/<\/span>/g, "")}
        </Text>
      </Card>
    );
  }

  render() {
    return (
      <View>
        <Swipe data={this.props.jobs} renderCard={this.renderCard} />
      </View>
    );
  }
}

const styles = {
  detailWrapper: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginBottom: 10
  }
};

function mapStateToProps({ jobs }) {
  return { jobs: jobs.listing };
}

export default connect(mapStateToProps)(DeckScreen);

这是动作创建者的外观：

import axios from "axios";
// import { Location } from "expo";
import qs from "qs";

import { FETCH_JOBS, LIKE_JOB } from "./types";
// import locationify from "../tools/locationify";

const JOB_ROOT_URL = "https://authenticjobs.com/api/?";

const JOB_QUERY_PARAMS = {
  api_key: "5634cc46389d0d872723b8c46fba672c",
  method: "aj.jobs.search",
  perpage: "10",
  format: "json"
};

const buildJobsUrl = () => {
  const query = qs.stringify({ ...JOB_QUERY_PARAMS });
  return `${JOB_ROOT_URL}${query}`;
};

export const fetchJobs = (region, callback) => async dispatch => {
  try {
    const url = buildJobsUrl();
    let { data } = await axios.get(url);
    dispatch({ type: FETCH_JOBS, payload: data });
    callback();
  } catch (e) {
    console.log(e);
  }
};

export const likeJob = job => {
  return {
    payload: job,
    type: LIKE_JOB
  };
};

和减速器：

import { FETCH_JOBS } from "../actions/types";

const INITIAL_STATE = {
  listing: []
};

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case FETCH_JOBS:
      return action.payload;
    default:
      return state;
  }
}

并且combineReducer正确设置了：

import { combineReducers } from "redux";
import auth from "./auth_reducer";
import jobs from "./jobs_reducer";
import likedJobs from "./likes_reducer";

export default combineReducers({
  auth,
  jobs,
  likedJobs
});

该listing: []基于断我找回响应的结构。当我console.log（data）;时，我关心的实际数据是在listing属性内部。因此，我将INITIAL_STATE默认列表设置为一个空数组，以确保可以映射到该数组，而不用担心尚未提取作业列表的情况。当我直接转到API端点时，您可以在下面看到它：