Question

我正在尝试使商品的当前价格成为数组中的最新出价。我收到此错误，但在日志中显示了我在寻找什么。只是破解一下，我认为它实际上还不存在，因此给了我错误。以前从未遇到过此问题。这是代码，感谢您的关注。



const ListingItem = ({
  auth,
  deleteListing,
  listing: {
    _id,
    user,
    username,
    title,

    bids,

    imagePath,
    date
  }
}) => {


  return (
    <div className="listing-container">
      <Link className="link" to={`/profile/user/${user}`}>
        {console.log(_id)}
        <h4>{username}</h4>
      </Link>

      <p className="listing-1 listing-title">{title}</p>
      <div className="listing-image-container">
        <img src={imagePath} className="listing-image-container-image" />
      </div>

      <p className="listing-price">
        Price:
        {console.log(bids[0].price)}
      </p>
      <p className="listing-bids">Bids:{bids.length}</p>
      <p className="listing-date">
        Posted on <Moment format="MM/DD/YYYY">{date}</Moment>
      </p>

      {!auth.loading && user === auth.user._id && (
        <button
          onClick={() => deleteListing(_id)}
          type="button"
          className="btn btn-danger m-b"
        >
          Delete
        </button>
      )}
      {!auth.loading && user !== auth.user._id && <BidForm listingId={_id} />}
    </div>
  );
};

ListingItem.propTypes = {
  listing: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired,
  deleteListing: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  user: state.user
});

export default connect(
  mapStateToProps,
  { deleteListing }
)(ListingItem);

Answer 1

如果要等到程序的其他部分为return设置一个值时，可以在第一个bids之前添加它：

if(!bids || bids.length === 0) return null;

或者您可以像这样包装价格部分：

{bids.length > 0 && <p className="listing-price">Price: {bids[0].price}</p>}

Answer 2

Manneskja有一个很好的解决方案。

不过，就我个人而言，我不会有条件地渲染整个<p>，但可能选择不显示价格值，直到它存在：

<p className="listing-price">Price: {bids[0] && bids[0].price}</p>

TypeError无法读取未定义的属性“价格”

2 个答案: