Question

我正在尝试从 redux 商店映射状态，但出现错误类型错误：无法读取未定义的属性“组”

我确定数据输入正确，但我不确定我是否以错误的方式映射了这个来呈现 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;

Answer 1

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

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

类型错误：无法读取未定义的属性“组”

1 个答案: