Question

感谢您的帮助。我正在使用react / redux应用程序。其中一个组件是使用生命周期方法从API检索数据。收到后，数据JSON数据保存在一个数组中。我返回的数据的initialState是一个空数组。

当安装了侦听状态更改的组件时，数据将呈现在页面上，但是2秒后我得到了一个

Uncaught TypeError: jobs.map is not a function

使用lifecyle方法调用API调用并侦听状态更改的组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getJobs } from '../../actions';
import { Card, Grid, Image, Feed } from 'semantic-ui-react';
// import './home.css';

const renderJobs = jobs => jobs.map((job, i) => (
    <Card.Group stackable key={i}>
      <Card className="jobscard">
        <Card.Content>
          <Card.Header href={job.detailUrl} target="_blank">{job.jobTitle}</Card.Header>
          <Card.Meta>{job.location}</Card.Meta>
          <Card.Description>{job.company}</Card.Description>
        </Card.Content>
      </Card>
    </Card.Group>
    ));

class GetJobs extends Component {

  componentDidMount() {
    this.props.getJobs();
  }

  render() {
    const { jobs } = this.props;
    return (
      <div className="getjobs">
        {renderJobs(jobs)}
      </div>
    );
  }
}

export default connect(({ jobs }) => ({ jobs }), { getJobs })(GetJobs);

行动创作者/行动

export const getJobsRequest = () => fetch('https://shielded-brushlands-43810.herokuapp.com/jobs',
)
 .then(res => res.json());

// action creator
export const getJobs = () => ({
  type: 'GET_JOBS',
  payload: getJobsRequest(),
});

Reducer

import initialState from './initialState';

export default function (jobs = initialState.jobs, action) {
  switch (action.type) {
    case 'GET_JOBS_PENDING':
      return { ...jobs, isFetching: true };
    case 'GET_JOBS_FULFILLED':
      return action.payload;
    case 'GET_JOBS_REJECTED':
      return jobs;
    default:
      return jobs;
  }
}

初始状态

export default {
  userData: {},
  jobs: [],
}

enter image description here

有关为何发生这种情况的任何想法？

Answer 1

在尝试呈现作业之前，您可以进行简单检查以确保作业准备就绪。

{jobs.length && renderJobs(jobs)}

在Array obj上React，TypeError（this.props.data.map不是函数）

1 个答案: