[英]React, TypeError (this.props.data.map is not a function) on an Array obj
Thank you for stopping by to help. 谢谢您的帮助。 I am working with a react/redux app.
我正在使用react / redux应用程序。 One of the component is using a lifecyle method to retrieve data from an API.
组件之一是使用生命周期方法从API检索数据。 Once recieved, the data JSON data is held within an array.
接收后,数据JSON数据将保存在数组中。 My initialState for the data coming back is an empty array.
我返回的数据的initialState是一个空数组。
When the component listening to the state change is mounted, the data is rendered on to the page, but then 2 seconds later I am getting a 当安装了侦听状态变化的组件时,数据将呈现到页面上,但是2秒后,我得到一个
Uncaught TypeError: jobs.map is not a function
Component making the API call using lifecyle method and listening for state change 使用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);
Action creator/action 动作创建者/动作
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;
}
}
And intial state 和初始状态
export default {
userData: {},
jobs: [],
}
enter image description here 在此处输入图片说明
any thoughts on why this is happening? 为什么会这样呢?
您可以进行简单的检查,以确保作业准备就绪,然后再尝试呈现它。
{jobs.length && renderJobs(jobs)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.