Array from nested serializer is undefined. REDUX, DRF - reactjs

Question

I am having trouble displaying the data from a nested serializer. I can get and see the data via Redux and see that it is in my props, but when I try to map it to my React component or the local state it says that it is undefined. I have been at this for a while and I am sure it is a minor issue but it is extremely frustrating.
Business Serializer:
from rest_framework import serializers
from .models import Business
from django.apps import apps as django_apps
from django.conf import settings
def get_job_model():
return django_apps.get_model(settings.JOB_MODEL, require_ready=False)
Job = get_job_model()
# Job Serializer
class JobSerializer(serializers.ModelSerializer):
class Meta:
model = Job
fields = "__all__"
class CreateBusinessSerializer(serializers.ModelSerializer):
jobs = None
class Meta:
model = Business
# fields = '__all__'
exclude = ['owner', 'geolocation']
class GetBusinessSerializer(serializers.ModelSerializer):
jobs = JobSerializer(many=True, read_only=True)
class Meta:
model = Business
# fields = '__all__'
exclude = ['owner', 'geolocation']
class AllBusiness(serializers.ModelSerializer):
class Meta:
model = Business
fields = ['business', 'address']
Business Page Component (abbreviated):
import React, {Component} from 'react';
import {businessDetail, getBusiness} from "../../../actions/business";
import {connect} from 'react-redux';
import store from "../../../store";
import {NOT_HOME} from "../../../actions/types";
import {Link} from "react-router-dom";
class BusinessPage extends Component {
constructor(props) {
super(props);
this.state = {
businessSlug: this.props.match.params.businessSlug,
jobs: this.props.jobs **placed this here so see it in react dev tools**
}
}
componentDidMount() {
this.props.businessDetail(this.state.businessSlug);
}
render() {
return (
<div className='pvt' id='business-page'>
{this.state.jobs.map(job => (
<div key={job.id} className="col-md-6 col-lg-12 item">
<div>
<div className="card">
<Link to={`/job-page/${job.uuid}`} />
</div>
</div>
</div>))}
</div>
);
}
}
function mapStateToProps(state) {
return {
business: state.business.business_page,
jobs: state.business.business_page.jobs,
};
}
export default connect(
mapStateToProps, {businessDetail}
)(BusinessPage);
These pictures will show the problem in more detail
React Dev Tools
Redux Dev Tools showing that it definitely exist
Console log when I try to map it to component
Thank you :)

Answer 1

I believe that this is a lifecycle problem. Both React and Redux are asynchronous so the data that you want might not exist at the moment where you are trying to access it.
this.state.jobs is being set in the constructor so it will store the very first value of this.props.jobs that it sees -- before the action in componentDidMount gets dispatched. If the jobs get set in the redux state as a result of this action, those changes will be reflected in the props but not in the state.
The redux store should be the "single source of truth" so you do not want to duplicate the redux state in your component state. You don't need any component state based on this snippet.
It's not necessary to pass jobs as its own prop since you can access that same variable though this.props.business.jobs. But it's not a problem if you want to keep it separate.
If we think that initial value of the business is undefined or does not have a property jobs, then we need to make sure that we are handling that properly. One simple solution is to replace undefined with an empty array [] so that you can call jobs.map() without errors.
Some of the many ways to safely access a jobs array:
const { jobs = [] } = this.props.business || {};
const jobs = this.props?.business?.jobs || [];
Component code:
class BusinessPage extends Component {
componentDidMount() {
// we don't need state because the slug is in the props
const slug = this.props.match.params.businessSlug;
this.props.businessDetail(slug);
}
render() {
const jobs = this.props?.business?.jobs || [];
return (
<div className="pvt" id="business-page">
{jobs.map((job) => (
<div key={job.id} className="col-md-6 col-lg-12 item">
<div>
<div className="card">
<Link to={`/job-page/${job.uuid}`} />
</div>
</div>
</div>
))}
</div>
);
}
}
function mapStateToProps(state) {
return {
business: state.business.business_page,
};
}
export default connect(
mapStateToProps, {businessDetail}
)(BusinessPage);