React Native: TypeError: undefined n'est pas un objet (évaluation de '_this.props.data.map')

Je me demande si React Native a un bogue qui doit être corrigé qui donne l'erreur suivante:

React Native: TypeError: undefined n'est pas un objet (évaluation '_this.props.data.map')

Je suis assez bon dans ce domaine et pourtant je n'arrive pas à comprendre pourquoi j'obtiens cette erreur lorsque j'assemble ce composant:

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
});

J'ai vérifié et revérifié à travers diverses pratiques de débogage que le problème ne vient pas de mon créateur ou réducteur d'action et après divers refactors, j'ai fait fonctionner ceux-ci correctement.

J'ai décidé de faire le composant ci-dessus à partir de zéro alors qu'avant je réutilisais un autre composant et pourtant j'obtiens toujours l'erreur ci-dessus.

Je demande si c'est un bug avec RN parce que quelqu'un d'autre a publié un problème similaire mais ils n'ont pas obtenu la réponse dont ils avaient besoin.

Ce n'est pas un problème de portée avec ceci parce que si je le refactore comme ceci:

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;
  }
}

cela ne fait absolument rien pour moi, même message d'erreur. Le message disant que ce n'est pas un objet est également déroutant, c'est un tableau et map () ne peut parcourir que des tableaux, donc pas sûr de ce que ne pas être un objet a à voir avec lui.

Le composant ci-dessus est appelé dans cet écran:

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
  };
};

Voici à quoi ressemble le créateur de l'action:

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);

et réducteur:

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

et le combineReducer est également configuré correctement:

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;

La liste : [] est basée sur la structure de la réponse que je reçois. Quand je console.log (data) ;, les données réelles qui m'intéressent sont à l'intérieur de la propriété listing . J'ai donc configuré INITIAL_STATE sur la liste par défaut pour être un tableau vide avec l'intention de m'assurer de pouvoir mapper sur le tableau et de ne pas m'inquiéter du cas où je n'ai pas encore récupéré la liste des travaux. Lorsque je vais directement au point de terminaison de l'API, vous pouvez le voir ci-dessous: