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

Question

我正在尝试在 Modal 部分打印 Selectedproduct 对象的属性，并且每件事都运行良好，直到到达“描述”数组属性，它显示我“无法读取未定义的属性‘地图’”。 尽管当我使用 console.log(Selectedproduct) 时，描述属性正常显示，但是当我编写 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

试试这个，因为您的 state 属性在运行时似乎仍未定义。

{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) for 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>