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

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

不讀取 props 變量屬性的原因是什么?

不讀取 props 變量屬性的原因是什么?

慕姐8265434 2022-05-22 10:21:05
我從 this.props 中刪除了這個。但現在本地主機中沒有顯示任何內容。我正在嘗試寫一個博客頁面來做出反應。這是我的 blog.js:import React from 'react'const Blog=props=>{    const {title,author,content}=this.props    return(        <div>         <h2>{title}</h2>              <h5><i>{author}</i></h5>              <br/>              <h3>{content}</h3>                  </div>    )}export default Blog我的 App.js 如下:import React,{Component} from 'react';import Blog from './Blog'class App extends Component {    render(){        const posts=[            {                title:'First',                author:'Anonymous',                content:'first Post',            },            {                title:'Second',                author:'Anonymous',                content:'Second Post',            },            {                title:'third',                author:'Anonymous',                content:'Second Post',            },        ]            return (                  <div className="container">                    <Blog postData={posts}/>                </div>            );        }    }export default App ;雖然我執行 npm start 沒有錯誤,但在瀏覽器中它說:TypeError: Cannot read property 'props' of undefinedBlogC:/Myfiles/python/Django/djangorest/booklearn/test-cases/src/Blog.js:5  2 |   3 |   4 | const Blog=props=>{> 5 |     const {title,author,content}=this.props  6 |     return(  7 |           8 |         <div>我的選擇已經不多了。我該如何解決這個問題?我最近開始使用 reactjs。任何建議將不勝感激。
查看完整描述

2 回答

?
紫衣仙女

TA貢獻1839條經驗 獲得超15個贊

您正在使用功能組件并props作為參數傳入您的函數 ( props =>)。你不需要使用this.propsjust propswill work。


您正在傳遞一個名為“postData”的帖子數組。在您的博客組件中,您需要:


import React from 'react'

const Blog=props=>{


return props.postData.map((post) => {

const { title, author, content } = post;

return (

  <div key={title}>

         <h2>{title}</h2>

              <h5><i>{author}</i></h5>

              <br/>

              <h3>{content}</h3>

                  </div>

    );

});

}


export default Blog;


查看完整回答
反對 回復 2022-05-22
?
小怪獸愛吃肉

TA貢獻1852條經驗 獲得超1個贊

刪除this,因為它不是一個類,并且 props 作為函數的第一個參數傳遞。


import React from 'react'

const Blog = (props) => {

    const { title,author,content } = props;

    return(

        <div>

         <h2>{title}</h2>

              <h5><i>{author}</i></h5>

              <br/>

              <h3>{content}</h3>

                  </div>

    )

}


export default Blog


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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