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

嗨，问题很简单，当应用启动时，在您拨打电话之前，商店中什么都没有。但是您尝试在render函数中使用recs1.items1 && recs2.items2进行渲染，但是存储中没有任何内容，因为调用尚未完成。因此recs1或recs2是未定义的。因此，在使用映射的props进行存储时，始终对prop进行空检查。

即在您的render方法中更改这两行以检查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,

    };


}

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

2 个答案: