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

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>

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：

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

因此，如果您的结构是 Selectedproduct.description.availableColors = ['blue', 'red'] 作为示例，您将需要如下代码：

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>