我正试图使用映射函数打印对象内部的数组，但我得到:无法读取未定义的属性映射

Question

我正试图在Modal部分中打印Selectedproduct对象的属性，每件事都很好，直到它达到"描述"；数组属性，它向我显示"；无法读取未定义的"的属性"map"；。事件尽管当我使用console.log(Selectedproduct(时，description属性会正常显示，但当我编写console.log(Selectedproduct.description(代码时，我不知道它为什么认为它是未定义的。你能告诉我为什么它不能将描述视为独立属性吗？

import React, { Component } from "react";
import FormatCurrency from "../Components/util";
import Slide from "react-reveal/Slide";
import Modal from "react-modal";
import Zoom from "react-reveal/Zoom";
import { connect } from "react-redux";
import { GetProducts } from "../Actions/ItemsActions";
import { AddToCart } from "../Actions/CartActions";
class Products extends Component {
constructor(props) {
super();
this.state = {
show: false,
Selectedproduct: {},
};
}
showModal = (product) => {
console.log(product);
this.setState({ show: true, Selectedproduct: product });
};
hideModal = () => {
this.setState({ show: false });
};
componentDidMount() {
this.props.GetProducts();
}
render() {
const { Selectedproduct } = this.state;
return (
<div>
<Slide left cascade={true}>
{!this.props.products ? (
<div> Loading..</div>
) : (
<ul className="products">
{this.props.products.map((product) => (
<li key={product._id}>
<div className="product">
<a href={"#" + product._id}>
<img
src={product.image}
alt={product.title}
onClick={() => this.showModal(product)}
></img>
<p>{product.title}</p>
</a>
<div className="product-price">
<div> {FormatCurrency(product.price)}</div>
<button
onClick={() => this.props.AddToCart(product)}
className="button primary overlay"
>
{" "}
Add to cart
</button>
</div>
</div>
</li>
))}
</ul>
)}
</Slide>
<Modal isOpen={this.state.show} onRequestClose={this.hideModal}>
<Zoom>
<button className="close-modal" onClick={this.hideModal}>
x
</button>
<div className="product-details">
<img
src={Selectedproduct.image}
alt={Selectedproduct.title}
></img>
<div className="product-details-description">
<p>{Selectedproduct.title}</p>
<ul>
{Selectedproduct.description.map((x)=>(<li>x</li>))}
</ul>
<div className="product-price">
<div>{FormatCurrency(Selectedproduct.price)}</div>
<button
className="button primary"
onClick={() => {
this.props.AddToCart(Selectedproduct);
this.hideModal();
}}
>
{" "}
Add to cart
</button>
</div>
</div>
</div>
</Zoom>
</Modal>
</div>
);
}
}
export default connect((state) => ({ products: state.products.filterdItems }), {
GetProducts,
AddToCart,
})(Products);

Answer 1

请尝试此操作，因为您的状态属性在运行时似乎仍未定义。

{Selectedproduct.description.map((x)=>(<li>x</li>))}

替换为：

{Selectedproduct && Selectedproduct.description? Selectedproduct.description.map((x)=>(<li>x</li>)):null}

Answer 2

描述可能未定义。代替：

<ul>
{Selectedproduct.description.map((x)=>(<li>x</li>))}
</ul>

只需放入这个临时代码，就可以尝试查看您的对象的真实外观：

<ul>
console.dir("### DESCRIPTION IS:", Selectedproduct.description)
</ul>

以及打开您的浏览器开发工具，查看这将打印到控制台的内容。

使用console.log后根据注释进行更新：

如果您正在为Selectedproduct获得类似availableColors: Array(2)的东西，则无法将数组打印到<li>标签中。数组不是字符串。你必须先取消内部数组的测试。

因此，如果您的结构是Selectedproduct.description.availableColors=["蓝色"，"红色"]，例如，您将需要以下代码：

const { availableColors, otherAttribute1, otherAttribute2 } = Selectedproduct.description // destructure all array attributes from description
...

然后稍后在组件中执行：

<ul>
{ availableColors.map(_ => <li>_</li>)}
{ otherAttribute1.map(_ => <li>_</li>)}
{ otherAttribute2.map(_ => <li>_</li>)}
</ul>