reactjs - ReactJS - TypeError:无法读取未定义的属性“名称”
问题描述
我有带有产品和购物车的 App.js。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import ProductGrid from './components/ProductGrid';
import CartTable from './components/CartTable';
import { fetchProducts } from './state/product/actions';
import { fetchCart } from './state/cart/actions';
class App extends Component {
componentDidMount() {
this.props.fetchProducts();
this.props.fetchCart();
}
render() {
const {
isProductLoading,
products,
cart,
} = this.props;
if(isProductLoading) {
return <h2>loading...</h2>
}
return (
<div>
<h1>Shop application!</h1>
<ProductGrid
products={products}
/>
<h1>Cart</h1>
<CartTable
cart={cart}
/>
</div>
);
}
}
const getProductById = (products, productId) => products.find(p => p._id === productId);
const populateCartItems = (c, p) => ({
...c,
items: c.items.map(i => ({
...i,
product: getProductById(p, i.productId),
})),
});
const mapStateToProps = (state) => ({
isProductLoading: state.product.isLoading,
products: state.product.products,
cart: populateCartItems(state.cart.cart, state.product.products),
});
const mapDispatchToProps = {
fetchProducts,
fetchCart,
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
问题在于购物车和产品对象的填充。
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Wrapper = styled.table`
width: 100%;
border-collapse: collapse;
td, th {
border: 1px solid #DDD;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background: #DDD;
}
`;
const CartTable = ({ cart }) => (
<Wrapper>
<thead>
<tr>
<th>Item Name</th>
<th>Item Price</th>
<th>Item Quantity</th>
</tr>
</thead>
<tbody>
{cart.items.map(item => (
<tr key={item.productId}>
<td>{item.product.name}</td>
<td>{}</td>
<td>{item.quantity}</td>
</tr>
))}
</tbody>
</Wrapper>
);
CartTable.propTypes = {
cart: PropTypes.shape({
items: PropTypes.arrayOf(PropTypes.shape({
product: PropTypes.shape({
name: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
}).isRequired,
productId: PropTypes.string.isRequired,
quantity: PropTypes.number.isRequired,
})).isRequired,
}).isRequired,
};
export default CartTable;
将购物车对象传递给 CartTable 时,出现错误:
TypeError:无法读取未定义的属性“名称”
30 | <tbody>
31 | {cart.items.map(item => (
32 | <tr key={item.productId}>
> 33 | <td>{item.product.name}</td>
34 | <td>{}</td>
35 | <td>{item.quantity}</td>
36 | </tr>
我很确定购物车对象在 App.js 中工作正常(使用 console.log 测试),但是在它传递给 CartTable 之后,找不到填充的产品对象。
解决方案
在尝试呈现数据之前,您没有验证数据。解决该问题的一个简单方法是将您的地图功能更改为:
{cart.items && !isProductLoading ? cart.items.map(item => (
<tr key={item.productId ? item.productId : null}>
<td>{item.product.name ? item.product.name : ''}</td>
<td>{}</td>
<td>{item.quantity ? item.quantity : null}</td>
</tr>
)) : null}
推荐阅读
- python - 如何从以下代码修复 OOM 错误?
- java - 如何在 Java 中使用 XML 文件中的 removeChild()
- flutter - 如何使用 Flutter 创建一个包含 TabBar 和(自定义)BarWidget 的小部件?
- python - 在 Python 中使用 Fernet 进行对称加密 - 主密码用例
- javascript - 如果输入值为空格,则禁用按钮?反应
- regex - 创建在桌面和 Android 上工作的 React 应用程序,但在 IOS 上是空白的
- python - 创建网络爬虫时如何修复错误“'NoneType'类型的对象没有len()”?
- android - react-native-notification 前台消息
- excel - 如何在 Excel 中更改单个文档的语言?
- gradle - 如何将文档添加到 gradle 插件扩展变量?