第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

TypeError: comments.map 不是函數(shù) react js

TypeError: comments.map 不是函數(shù) react js

12345678_0001 2023-04-14 17:14:35
當(dāng)我選擇一個(gè)對(duì)象時(shí)出現(xiàn)錯(cuò)誤,當(dāng)前評(píng)論文件存儲(chǔ)在另一個(gè)文件中,我正在這個(gè)文件中訪問(wèn)它,但出現(xiàn)錯(cuò)誤TypeError: comments.map 不是一個(gè)函數(shù)我的代碼:import React from "react";import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from "reactstrap";function RenderDish({ dish }) {  if (dish != null) {    return (      <div className="col-12 col-md-5 m-1">        <Card>          <CardImg width="100%" object src={dish.image} alt={dish.name}></CardImg>          <CardBody>            <CardTitle>{dish.name}</CardTitle>            <CardText>{dish.description}</CardText>          </CardBody>        </Card>      </div>    );  } else {    return <div></div>;  }}function RenderComments(comments) {  if (comments != null) {    const commentsList = comments.map((Comment) => {      return (        <div className="container">          <li key={Comment.id}>            <p>{Comment.Comment}</p>            <p>              -- {Comment.author},              {new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "2-digit" }).format(new Date(Date.parse(Comment.id)))}            </p>          </li>        </div>      );    });    return (      <div className="col-12 col-md-5 m-1">        <h3>Comments</h3>        <ul className="list-unstyled">{commentsList}</ul>      </div>    );  } else {    return <div></div>;  }}const DishDetail = (props) => {  console.log("Dishdetail Component render invoked");  if (props.dish != null) {    return (      <div className="row">        <RenderDish dish={props.dish} />        <RenderComments comments={props.dish.comments} />      </div>    );  } else {    return <div></div>;  }};export default DishDetail;
查看完整描述

3 回答

?
POPMUISE

TA貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個(gè)贊

我得到了同樣的錯(cuò)誤。


在我的例子中,通過(guò)在主要組件中選擇索引 0 而不是完整數(shù)組,錯(cuò)誤地傳遞了單個(gè)數(shù)組項(xiàng)。


comments={this.state.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId, 10))[0]}在主組件中。


更正版本:


const DishWithId = ({ match }) => {

        return (

            <DishDetail dish={this.state.dishes.filter((dish) => dish.id === parseInt(match.params.dishId, 10))[0]}

                comments={this.state.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId, 10))} />

        );

    }


查看完整回答
反對(duì) 回復(fù) 2023-04-14
?
慕的地8271018

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

我很抱歉這個(gè)答案是矯枉過(guò)正。


你傳入的任何 like 都comment={comment}將作為對(duì)象成為 props 的一部分,因此你需要從中解構(gòu)評(píng)論。


您也不需要在條件渲染期間返回空的 div。什么都不返回是一樣的。


還有,value != null不夠。如果該值是任何其他類(lèi)型的假值,您的應(yīng)用程序仍會(huì)崩潰,因此!value更安全。


如果您要有條件地內(nèi)聯(lián)渲染,則使用&&or 三元? :而不是標(biāo)準(zhǔn)if.


import React from "react";

import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from "reactstrap";


const RenderDish = ({ dish }) => (

  dish && (

    <div className="col-12 col-md-5 m-1">

      <Card>

        <CardImg width="100%" object src={dish.image} alt={dish.name}></CardImg>

        <CardBody>

          <CardTitle>{dish.name}</CardTitle>

          <CardText>{dish.description}</CardText>

        </CardBody>

      </Card>

    </div>

  )

);


const RenderComments = ({ comments }) => (

  comments && (

    <div className="col-12 col-md-5 m-1">

      <h3>Comments</h3>

      <ul className="list-unstyled">{

        comments.map(comment => (

          <div className="container">

            <li key={comment.id}>

              <p>{comment.comment}</p>

              <p>

                -- {comment.author},

                {new Intl.DateTimeFormat("en-US", {

                  year: "numeric",

                  month: "short",

                  day: "2-digit"

                }).format(new Date(Date.parse(comment.id)))}

              </p>

            </li>

          </div>

        ))

      }</ul>

    </div>

  )

);


const DishDetail = ({ dish }) => (

  dish && (

    <div className="row">

      <RenderDish dish={dish} />

      <RenderComments comments={dish.comments} />

    </div>

  )

);


export default DishDetail;


查看完整回答
反對(duì) 回復(fù) 2023-04-14
?
翻翻過(guò)去那場(chǎng)雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊

您傳遞道具并映射道具而不是訪問(wèn)它:


<RenderComments comments={props.dish.comments} />


// Not RenderComments(comments)

function RenderComments(props) {

  ...

  props.comments.map(...)

}


查看完整回答
反對(duì) 回復(fù) 2023-04-14
  • 3 回答
  • 0 關(guān)注
  • 192 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)