鍍金池/ 問答/網(wǎng)絡安全  HTML/ react 中用fetch取到的json數(shù)據(jù) 渲染不到頁面中

react 中用fetch取到的json數(shù)據(jù) 渲染不到頁面中

使用了ant-design樣式框架
取到的數(shù)據(jù)header是200狀態(tài)碼 ，respond也有數(shù)據(jù)，就是頁面沒有效果
fetch部分：

    componentWillMount(){
        var myFetchOptions={
            method :'GET'
        };
        fetch("http://v.juhe.cn/toutiao/index?type="+this.props.type +
            "&key=46e7985e9edd9368dde9136c8fae6", myFetchOptions)
        .then(response => response.json())
        .then(responseJson => this.setState({news:responseJson}));
        

    };

construtor函數(shù)：

constructor(){
            super();
            this.state={
                news:''
            }
        };

response中的數(shù)據(jù)：

clipboard.png

數(shù)據(jù)的渲染：

news.result.data.map((newsItem,index)=>(
            <div key={index} class="imageblock">
                <Link to={'details/${newsItem.uniquekey}'} target="_blank">
                <div class="custom-image">
                <img alt="" style={styleImage} src={newsItem.thumbnail_pic_s} />            
                </div>
                <div class="custom-card">
                    <h3 style={styleH3}>{newsItem.title}</h3>
                    <p>{newsItem.author_name}</p>
                </div>
                </Link>
            </div>
            ))
回答
編輯回答
做不到

constructor 中的 news 初始化類型有誤，應該是個空數(shù)組 [] 而不是空字符串 ''，如果是空字符串的話，第一次渲染時 news.result.data.map 會報錯，所以你的頁面是個空白頁

constructor(){
    super()
    this.state = {
        news: []
    }
};
2018年1月6日 14:15
編輯回答
病癮

constructor里應該定義為{}空對象，在willMount方法和render里分別輸出，看需要的數(shù)據(jù)到底有沒有setState成功。

constructor(){

super()
this.state = {
    news: {}
}

};

2017年11月4日 11:45
編輯回答
有你在

循環(huán)賦值的時候，不應該是this.state.news.result.data.map嘛？

2017年9月11日 21:27
編輯回答
柒喵

看看render有沒有走到

2018年9月10日 00:50