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

Question

我想知道 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 端点时，您可以在下面看到它：

Answer 1

我认为问题只是this.props.jobs未定义。 您的初始状态定义为{ listing: [] } ，但是您 mapStateToProps 做{ jobs: ... } 。

尝试将 initialState 更改为{ jobs: [] } ，以便它始终适用于您的第一次渲染。

我认为你的 mapStateToProps 应该是：

mapStateToProps = (state) => {
  return { jobs: listings.listing }
}

编辑实际上，如果您在减速器中正确“命名”您的状态可能会更好，例如：

const INITIAL_STATE = { jobs: [] }

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

然后在您的 mapStateToProps 中：

mapStateToProps = ({ jobs }) => {
  return { jobs }
}

Answer 2

问题出在您的减速器上。 请参阅以下更改：

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

const INITIAL_STATE = {
  listing: []
};

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

希望这会有所帮助。

Answer 3

function mapStateToProps({ jobs }) {

return { jobs: jobs.listing }; }

以上是让你感到困惑，试试下面的

试着放

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

因为你已经定义了你的减速器如下

export default combineReducers({

auth, jobs, likedJobs });

工作是您访问工作减少器的变量