TypeError：无法读取未定义的属性“组”答案

【问题标题】：TypeError: Cannot read property 'group' of undefinedTypeError：无法读取未定义的属性“组”
【发布时间】：2021-07-19 13:07:39
【问题描述】：

我正在尝试从 redux 商店映射状态并且我得到了错误 TypeError：无法读取未定义的属性“组”

我确定数据输入正确，但我不确定我是否映射过这种错误的方式来呈现 contactDetails?.contact?.data?.group?.title 有没有办法从组详细信息？我对这个 redux 有点陌生，需要一些帮助。

我还需要在这里输入一些内容，让我猜猜有人偷了你的糖果？

下面是我的组件。

import React, { useEffect, Fragment, useState } from 'react';
import {
  Button,
  ButtonGroup,
  Card,
  CardBody,
  Col,
  Row
} from 'reactstrap';
import ButtonIcon from '../common/ButtonIcon';
import { useSelector, useDispatch } from 'react-redux';
import { contactById, deleteContact } from '../../actions/index';


const ContactEdit = ({match}) => {

  const ContactId = match.params.id

  const dispatch = useDispatch();


  const contactDetails = useSelector((state) => state.contactDetails)
  const { success: successGet } = contactDetails

  useEffect(() => {
    dispatch(contactById(ContactId))
  }, [successGet])

  const CustomerDetailRow = ({ title, isLastItem, children }) => (
    <Row>
      <Col xs={5} sm={4}>
        <p
          className={classNames('font-weight-semi-bold', {
            'mb-0': isLastItem,
            'mb-1': !isLastItem
          })}
        >
          {title}
        </p>
      </Col>
      <Col>{children}</Col>
    </Row>
  );
  
  CustomerDetailRow.propTypes = {
    title: PropTypes.string.isRequired,
    children: PropTypes.node.isRequired,
    isLastItem: PropTypes.bool
  };
  
  CustomerDetailRow.defaultProps = { last: false };

  return (
    <Card className="mb-3">
      <CardBody className="bg-light border-top">     
          <Row>
            <Col lg className="col-xxl-5">
              <h6 className="font-weight-semi-bold ls mb-3 text-uppercase">Contact 
                Details</h6>
              
              <CustomerDetailRow title="Groups" isLastItem>     <----- here is my issue
                {contactDetails.contact.data.group.map( groups => <p className="font-italic text-400 mb-0">{contactDetails?.contact?.data?.group?.title}</p>)}
              </CustomerDetailRow>


            </Col>
          </Row>
        
      </CardBody>
     
    </Card>
    </Card>

  );
};

export default ContactEdit;

【问题讨论】：

您似乎没有在地图回调中引用groups。据我所知，问题出在contactDetails.contact.data 上，没有定义您尝试映射组属性的位置。您能否更新您的问题以包括您的 contactDetails reducer 以及您如何创建商店并提供 redux 上下文？
感谢提请...我是新手，这是解决方案。 <CustomerDetailRow title="Groups" isLastItem> {contactDetails?.contact?.data?.group.map( groups => <p className="font-italic text-400 mb-0">{groups.title}</p>)} </CustomerDetailRow>

标签： reactjs redux

【解决方案1】：

正如 Drew 在 cmets 中所说，我在地图回调中错误地引用了组，这是下面的解决方案，我还添加了 ?给时间加载结果

<CustomerDetailRow title="Groups" isLastItem>
                {contactDetails?.contact?.data?.group.map(groups => <p className="font-italic text-400 mb-0">{groups.title}</p>)}
              </CustomerDetailRow>```

【讨论】：