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

Question

我正在尝试在 Modal 部分中打印 Selectedproduct 对象的属性，并且在到达“描述”数组 属性 之前一切正常，它显示“无法读取 属性 'map' 未定义”。尽管当我使用 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

说明可能未定义。而不是：

                <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 = ['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>

Answer 2

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

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

替换为：

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