我正在尝试使用 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&nbsp;&&&nbsp;Selectedproduct.description?&nbsp;Selectedproduct.description.map((x)=>(<li>x</li>)):null}

Answer 2

描述可能未定义。代替：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{Selectedproduct.description.map((x)=>(<li>x</li>))} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>只需放入这个临时代码来尝试查看您的对象的真实外观：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.dir("###&nbsp;DESCRIPTION&nbsp;IS:",&nbsp;Selectedproduct.description) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>然后打开你的浏览器开发工具，看看打印到控制台的内容。使用后根据评论更新console.log：如果您得到类似于availableColors: Array(2)Selectedproduct 的东西，则无法将数组打印到您的<li>标签中。数组不是字符串。您必须先取消嵌套内部数组。因此，如果您的结构是 Selectedproduct.description.availableColors = ['blue', 'red'] 作为示例，您将需要如下代码：const&nbsp;{&nbsp;availableColors,&nbsp;otherAttribute1,&nbsp;otherAttribute2&nbsp;}&nbsp;=&nbsp;Selectedproduct.description&nbsp;//&nbsp;destructure&nbsp;all&nbsp;array&nbsp;attributes&nbsp;from&nbsp;description ...然后稍后在组件中执行：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;availableColors.map(_&nbsp;=>&nbsp;<li>_</li>)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;otherAttribute1.map(_&nbsp;=>&nbsp;<li>_</li>)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;otherAttribute2.map(_&nbsp;=>&nbsp;<li>_</li>)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>