首頁(yè) 猿問(wèn) Uncaught (in...

Uncaught (in promise) TypeError: Cannot read property 'pagecontent' of null(…),這個(gè)問(wèn)題怎么解決啊

React.JS

qq_沒(méi)有蠟筆的小新_5 2018-04-19 14:40:16

import React from 'react';import {Row,Col} from 'antd';export default class PCNewsDetails extends React.Component{? constructor(){? ? super();? ? this.state={? ? ? newsItem: ''? ? };? };? ? componentDidMount(){? ? ? var myFetchOptions={? ? ? ? method:'GET'? ? ? };? ? ? fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnewsitem&uniquekey="+this.props.params.uniquekey,myFetchOptions)? ? ? .then(response=>response.json())? ? ? .then(json=>{? ? ? ? this.setState({newsItem:json});? ? ? ? document.title=this.state.newsItem.title+" - React News | React 驅(qū)動(dòng)的新聞平臺(tái)";? ? ? })? ? };? ? createMarkup(){? ? ? return {__html:this.state.newsItem.pagecontent};? ? };? render(){? ? return(? ? ? <div>? ? ? ? ? <Row>? ? ? ? ? ? <Col span={2}></Col>? ? ? ? ? ? <Col span={14} className="container">? ? ? ? ? ? ? <div class="articleContainer" dangerouslySetInnerHTML={this.createMarkup()}></div>? ? ? ? ? ? </Col>? ? ? ? ? ? <Col span={6}></Col>? ? ? ? ? ? <Col span={2}></Col>? ? ? ? ? </Row>? ? ? </div>? ? );? };}

查看完整描述

4 回答

zzZerOrz

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

Cannot read property 'pagecontent' of null這句話的意思是調(diào)用pagecontent這個(gè)屬性的變量是null，也就是空的，根據(jù)你這句__html:this.state.newsItem.pagecontent，所以說(shuō)this.state.newsItem = null了

反對(duì) 回復(fù) 2018-04-19

qq_沒(méi)有蠟筆的小新_5
那應(yīng)該怎么解決啊

回復(fù) 2018-04-19
zzZerOrz
.then(json=>{ 在fetch的這一步，console.log(json, "json fetch")；看一下控制臺(tái)打印的json是不是空的，還有用數(shù)據(jù)時(shí)要加判斷，if(this.state.newsItem = null)，才去獲取this.state.newsItem.pagecontent

回復(fù) 2018-04-19
qq_沒(méi)有蠟筆的小新_5
null "json fetch" 顯示的是空值 Cannot read property 'title' of null 標(biāo)題屬性也是空

回復(fù) 2018-04-20

牛奶老哥哥

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

沒(méi)有pagecontent這個(gè)屬性，代碼寫(xiě)錯(cuò)了啊，代碼都沒(méi)有你想怎么解決

反對(duì) 回復(fù) 2018-04-19

qq_沒(méi)有蠟筆的小新_5
import React from 'react'; import {Row,Col} from 'antd'; export default class PCNewsDetails extends React.Component{ constructor(){ super(); this.state={ newsItem: '' }; }; componentDidMount(){ var myFetchOptions={ method:'GET' }; fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnewsitem&uniquekey="+this.props.params.uniquekey,myFetchOptions) .then(response=>response.json()) .then(json=>{ this.setState({newsItem:json}); document.title=this.state.newsItem.title+" - React News | React 驅(qū)動(dòng)的新聞平臺(tái)"; }) }; createMarkup(){ return {__html:this.state.newsItem.pagecontent}; }; render(){ return( <div> <Row> <Col span={2}></Col> <Col span={14} className="container"> <div class="articleContainer" dangerouslySetInnerHTML={this.createMarkup()}></div> </Col> <Col span={6}></Col> <Col span={2}></Col> </Row> </div> ); }; }

回復(fù) 2018-04-19
qq_沒(méi)有蠟筆的小新_5
代碼我給填上了，你看看能解決嗎？

回復(fù) 2018-04-19
牛奶老哥哥
判斷this.state.newsItem有值再執(zhí)行this.createMarkup()

回復(fù) 2018-04-19