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

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

ReactJS 渲染數(shù)據(jù),從 laravel 控制器作為 json 字符串傳遞

ReactJS 渲染數(shù)據(jù),從 laravel 控制器作為 json 字符串傳遞

我對(duì) React 完全陌生。我想使用laravel從數(shù)據(jù)庫(kù)中檢索數(shù)據(jù);在我的控制器中,我接收數(shù)據(jù)并以json形式發(fā)送,如下所示public function index(){    $data =  DB::table('posts')->get();    return view('welcome')->withData(json_encode($data));}它完美地工作。在我的家庭視圖中,我像這樣調(diào)用反應(yīng)。        <div id="example" data="{{ $data }}"></div>        <script src="js/app.js" ></script>這是例子.js:    import React, { Component } from 'react';    import ReactDOM from 'react-dom';    export default class Example extends Component    {        constructor(props)        {            super(props);            console.log(props.data);//[{"id":1,"name":"Laravel","created_at":null,"updated_at":null},{"id":2,"name":"Reacts Js","created_at":null,"updated_at":null}]            const json = JSON.parse(props.data);            var L = json.length;//2            for(var i =0 ; i < L ; i++)            {                console.log(json[i].name);//i==0 : Laravel                                        // i==1 : Reacts Js            }        }        render()        {            return (                <div className="container">                    <div className="row justify-content-center">                        <div className="col-md-8">                            <div className="card">                                <div className="card-header">Example Component</div>                                for(var i =0 ; i < L ; i++)                                {                                    <div>{json[i].name}</div>                                }                                <div className="card-body">I'm an example component!</div>                            </div>                        </div>                    </div>                </div>                    );        }    }    if (document.getElementById('example')) {        var data = document.getElementById(('example')).getAttribute('data');        ReactDOM.render(<Example data={data}/>, document.getElementById('example'));    }在瀏覽器控制臺(tái)中,我可以看到j(luò)son[i].name完美!但是在組件中,我有這個(gè)問(wèn)題,有以下錯(cuò)誤:未捕獲的類型錯(cuò)誤:無(wú)法讀取未定義的屬性“名稱”。
查看完整描述

1 回答

?
嗶嗶one

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

是因?yàn)?JSON 在 它的范圍內(nèi),在它之外不可見(jiàn)。您可能希望將數(shù)據(jù)存儲(chǔ)在組件狀態(tài)中,并將用戶存儲(chǔ)在呈現(xiàn)中。constructor


您可以使用 then .map 來(lái)迭代 中的 JSON 數(shù)據(jù)。render()


class Example extends Component {

  constructor(props) {

    super(props);


    console.log(props.data);//[{"id":1,"name":"Laravel","created_at":null,"updated_at":null},{"id":2,"name":"Reacts Js","created_at":null,"updated_at":null}]


    this.state = {

      json:JSON.parse(props.data)

    };

  }


  render() {

    return (

      <div className="container">

        <div className="row justify-content-center">

          <div className="col-md-8">

            <div className="card">

              <div className="card-header">Example Component</div>

              {this.state.json.map(i => (

                <div>{i.name}</div>

              ))}

              <div className="card-body">I'm an example component!</div>

            </div>

          </div>

        </div>

      </div>

    );

  }

}


查看完整回答
反對(duì) 回復(fù) 2022-08-04
  • 1 回答
  • 0 關(guān)注
  • 178 瀏覽
慕課專欄
更多

添加回答

舉報(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)