亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我正在嘗試使用 map 函數在對象內部打印數組,但我得到:無法讀取未定義的屬性映射

我正在嘗試使用 map 函數在對象內部打印數組,但我得到:無法讀取未定義的屬性映射

泛舟湖上清波郎朗 2023-05-25 17:35:51
我正在嘗試在 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>
查看完整描述

2 回答

?
jeck貓

TA貢獻1909條經驗 獲得超7個贊

試試這個,因為您的狀態屬性在運行時似乎仍未定義。

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

用。。。來代替:

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


查看完整回答
反對 回復 2023-05-25
?
牧羊人nacy

TA貢獻1862條經驗 獲得超7個贊

描述可能未定義。代替:

                <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>


查看完整回答
反對 回復 2023-05-25
  • 2 回答
  • 0 關注
  • 197 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號