Question

我的数据库生成此json数据

[{"id":"1","firstName":"jmarkatti"}]

此反应redux 代码使用映射方法显示记录，并且工作正常。

现在我已经要求在渲染功能内尝试显示不具有此效果的映射方法的记录

以下任何以下代码

 Name: {pgs1.items1.firstName} <br />
 Name: {pg1.items1[0].firstName} <br />
 Name: {this.props.pgs1.items1.firstName} <br />

，但会保持dsiplaying错误 TypeError：无法读取未定义的属性“ firstName” 在Recording1.render

在 Reactjs 中，我可以做类似的事情

Name:  {this.state.rec[0].firstName} <br />

但是在反应redux 中，它显示上述错误

这是主要的 React Redux 代码

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { uActions } from '../actions';

class Recording1 extends React.Component {

constructor(props) {
        super(props);
this.state = {};

       }

    componentDidMount() {
this.props=this.props.dispatch(userActions.getAll_Rec());
}

render() {
        const { pg1, pgs1 } = this.props;
        return (
           <div>      
              {pgs1.items1 &&
<ul>
// display record with mapping metthod
  {pgs1.items1.map((pg1, i) =>
<li key={pg1.id}>
 Name: {pg1.firstName} <br />
</li>
)}

</ul>
 }


           <div>

// display records without mapping method

 //Name: {pgs1.items1.firstName} <br />
 //Name: {pg1.items1.firstName} <br />
 //Name: {this.props.pgs1.items1.firstName} <br />

                   </div>

</div>

);
    }
}


function mapStateToProps(state) {
    const { pgs1} = state;
    const { pg1 } = state;
    return {
        pg1,
        pgs1
    };
}


const connectedRecording1 = connect(mapStateToProps)(Recording1);
export { connectedRecording1 as Recording1 };

这是 Redux Reducer

export function pgs1(state = {}, action) {
  switch (action.type) {



case userConstants.GETALL_REQUEST:
  return {
    ...state,
    loading: true
  };
case userConstants.GETALL_SUCCESS:
  return {
    loading: false,
    error: null,
items1: action.pgs1
  };

更新

服务API调用

function getAll_Rec(us) {

    const req = {
        method: 'POST',

       headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({us})
    };
        return fetch(`record.php`, req).then(handleResponse)
     .then(pg1 => {

            if (pg1) {
               console.log(pg1);
            }

            return pg1;
        });
}

Answer 1

如果要显示这样的数据。

 Name: {this.props.pgs1.items1.firstName} <br />

尝试这个。

 Name: {this.props && this.props.pgs1 && this.props.pgs1.items1 && 
               this.props.pgs1.items1.firstName} <br />

因为在大多数情况下，我们将数据呈现给DOM道具的时间是不确定的。因此，避免出现该问题，请检查是否先对每个断点使用AND来接收道具。

如何使用React Redux来显示数据而不使用映射方法

1 个答案: