使用React Redux显示来自不同API调用的多个记录

Question

我有两个不同的记录要从不同的API调用中以不同的方式提取，我希望显示这两个记录在同一页上使用react redux。

如果我按照记录1和2分别提取记录，一切都很好，但如果我试图在同一页上同时显示记录1和2，是否出现错误

TypeError: Cannot read property 'items2' of undefined
at RecordPage.render 

如果单独提取，则记录1工作良好

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
class RecordPage extends React.Component {
constructor(props) {
super(props);
this.state = {
us: 0
};
}
componentDidMount() {

this.props.dispatch(userActions.getAll_Record1());
//this.props.dispatch(userActions.getAll_Record2());
}
render() {
const { rec1, recs1 } = this.props;
return (
<div style={{background:'red'}} className="well col-md-6 col-md-offset-3">

{recs1.items1 &&
<ul>
<h1> First Records</h1>
{recs1.items1.map((rec1, index) =>
<li  key={rec1.id}>
{ rec1.name+' '+rec1.id}

</li>
)}

</ul>
}

<p>
First Record as per rec1
</p>

</div>

);
}
}

function mapStateToProps(state) {
const { recs1, authentication } = state;
const { rec1 } = authentication;
return {
rec1,
recs1
};
}

const connectedRecordPage = connect(mapStateToProps)(RecordPage);
export { connectedRecordPage as RecordPage};

如果单独提取，则记录2工作良好

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
class RecordPage extends React.Component {
constructor(props) {
super(props);
this.state = {
us: 0
};
}
componentDidMount() {

//this.props.dispatch(userActions.getAll_Record1());
this.props.dispatch(userActions.getAll_Record2());
}
render() {
const { rec2, recs2 } = this.props;
return (
<div style={{background:'red'}} className="well col-md-6 col-md-offset-3">

{recs2.items2 &&
<ul>
<h1>Second Records </h1>
{recs2.items2.map((rec2, index) =>
<li  key={rec2.id}>
{ rec2.email+' '+rec2.id}

</li>
)}

</ul>
}

<p>
Second Record as per rec2
</p>

</div>

);
}
}

function mapStateToProps(state) {
const { recs2, authentication } = state;
const { rec2 } = authentication;
return {
rec2,
recs2
};
}

const connectedRecordPage = connect(mapStateToProps)(RecordPage);
export { connectedRecordPage as RecordPage};

这是我的问题。我想在同一页上同时显示记录1和2，但出现错误

TypeError: Cannot read property 'items2' of undefined
at RecordPage.render

同时显示记录1和2的代码

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
class RecordPage extends React.Component {
constructor(props) {
super(props);
this.state = {
us: 0
};
}
componentDidMount() {
//get record1     
this.props.dispatch(userActions.getAll_Record1());
//get record 2
this.props.dispatch(userActions.getAll_Record2());
}
render() {
const { rec1, recs1 } = this.props;
const { rec2, recs2 } = this.props
return (
<div style={{background:'red'}} className="well col-md-6 col-md-offset-3">
// show first record  
{recs1.items1 &&
<ul>
<h1> First Records</h1>
{recs1.items1.map((rec1, index) =>
<li  key={rec1.id}>
{ rec1.name+' '+rec1.id}

</li>
)}

</ul>
}

// show second record  
{recs2.items2 &&
<ul>
<h1> First Records</h1>
{recs2.items2.map((rec2, index) =>
<li  key={rec2.id}>
{ rec2.email+' '+rec2.id}

</li>
)}

</ul>
}

<p>
show first and second record together
</p>

</div>

);
}
}

function mapStateToProps(state) {
const { recs1, authentication } = state;
const { rec1 } = authentication;
return {
rec1,
recs1
};
}

const connectedRecordPage = connect(mapStateToProps)(RecordPage);
export { connectedRecordPage as RecordPage};

我不知道问题是否来自下面的代码

componentDidMount() {
//get record1     
this.props.dispatch(userActions.getAll_Record1());
//get record 2
this.props.dispatch(userActions.getAll_Record2());
}
or 
function mapStateToProps(state) {
const { recs1, authentication } = state;
const { rec1 } = authentication;
return {
rec1,
recs1
};
}

Answer 1

嗨，问题很简单，当应用程序启动时，在你打电话之前，商店里什么都没有。但是您正试图使用recs1.items1&amp；render函数中的recs2.items2，但由于调用尚未完成，存储中没有任何内容。所以recs1或recs2是未定义的。所以在使用映射到存储的道具时，总是对道具进行null检查。

即，在您的渲染方法中，更改这2行以检查recs1和recs2是否为未定义

{recs1 && recs1.items1 &&
{recs2 && recs2.items2 &&

Answer 2

这就是真正解决问题的方法。我确保按照下面的代码在mapStateToProps(state) {}函数中正确设置了记录属性，并且它可以正常工作。。

function mapStateToProps(state) {
const { recs1} = state;
const { rec1} = state;
const { recs2} = state;
const { rec2} = state;
return {
rec1,
recs1,
rec2,
recs2,
};

}