时间戳

首页 > 解决方案 > 使用 React Redux 显示来自不同 API 调用的多条记录

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

问题描述

我有两条不同的记录要从不同的 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

    };
}

标签： reactjsredux

解决方案

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

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

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

推荐阅读