React Native TypeError：TypeError：undefined不是一个对象

Question

我决定重用我认为适用于引入第三方API的新应用程序的组件。

有问题的可重用组件正在迭代this.props.data.map()，该组件在我的components/Swipe.js文件中评估为未定义：

import React, { Component } from "react";

import {

  View,

  Animated,

  PanResponder,

  Dimensions,

  LayoutAnimation,

  UIManager

} from "react-native";

const SCREEN_WIDTH = Dimensions.get("window").width;

const SWIPE_THRESHOLD = 0.25 * SCREEN_WIDTH;

const SWIPE_OUT_DURATION = 250;

class Swipe extends Component {

  static defaultProps = {

    onSwipeRight: () => {},

    onSwipeLeft: () => {}

  };

  constructor(props) {

    super(props);

    const position = new Animated.ValueXY();

    const panResponder = PanResponder.create({

      onStartShouldSetPanResponder: (event, gestureState) => true,

      onPanResponderMove: (event, gestureState) => {

        position.setValue({ x: gestureState.dx, y: gestureState.dy });

      },

      onPanResponderRelease: (event, gestureState) => {

        if (gestureState.dx > SWIPE_THRESHOLD) {

          this.forceSwipe("right");

        } else if (gestureState.dx < -SWIPE_THRESHOLD) {

          this.forceSwipe("left");

        } else {

          this.resetPosition();

        }

      }

    });

    this.state = { panResponder, position, index: 0 };

  }

  componentWillReceiveProps(nextProps) {

    if (nextProps.data !== this.props.data) {

      this.setState({ index: 0 });

    }

  }

  componentWillUpdate() {

    UIManager.setLayoutAnimationEnabledExperimental &&

      UIManager.setLayoutAnimationEnabledExperimental(true);

    LayoutAnimation.spring();

  }

  forceSwipe(direction) {

    const x = direction === "right" ? SCREEN_WIDTH : -SCREEN_WIDTH;

    Animated.timing(this.state.position, {

      toValue: { x, y: 0 },

      duration: SWIPE_OUT_DURATION

    }).start(() => this.onSwipeComplete(direction));

  }

为什么会这样，因为我确实payload: data在动作创建者中找到了a ：

Answer 1

映射函数通常通过数组对象进行迭代。您正在尝试遍历非数组对象。因此，首先使用检查对象的类型，typeof(variable)然后使用函数。

Answer 2

看起来是什么帮助jobs_reducer从以下位置重构了我的文件：import { FETCH_JOBS } from "../actions/types";const INITIAL_STATE = {&nbsp; listing: []};export default function(state = INITIAL_STATE, action) {&nbsp; switch (action.type) {&nbsp; &nbsp; case FETCH_JOBS:&nbsp; &nbsp; &nbsp; return action.payload;&nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; return state;&nbsp; }}对此：export default function(state = INITIAL_STATE, action) {&nbsp; switch (action.type) {&nbsp; &nbsp; case FETCH_JOBS:&nbsp; &nbsp; &nbsp; const { listings } = action.payload;&nbsp; &nbsp; &nbsp; return { ...state, listing: listings.listing };&nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; return state;&nbsp; }}