深入REACT技术栈.pdf P185

最新推荐文章于 2021-09-27 21:04:36 发布

wmnmtm

最新推荐文章于 2021-09-27 21:04:36 发布

阅读量455

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/wmnmtm/article/details/119207703

版权

react 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这是一个关于React组件的示例，展示如何在CommentList组件中处理数据加载及错误状态。组件首先设置初始状态为加载中，然后利用`componentDidMount`生命周期方法发起API请求获取评论数据。成功时，将数据更新到组件状态；失败时，显示错误信息。渲染部分根据状态展示加载提示、错误信息或评论列表。

摘要由CSDN通过智能技术生成

import React, { Component, PropTypes } from 'react'; 
class CommentList extends Component { 
 constructor(props) { 
 super(props); 
 this.state = { 
 loading: true, 
 error: null, 
 value: null, 
 }; 
 } 
 componentDidMount() { 
 this.props.promise.then(response => response.json()) 
 .then(value => this.setState({ loading: false, value })) 
 .catch(error => this.setState({ loading: false, error })); 
 } 
 render() { 
 if (this.state.loading) { 
 return <span>Loading...</span>; 
 } else if (this.state.error !== null) { 
 return <span>Error: {this.state.error.message}</span>; 
 } else { 
 const list = this.state.value.commentList; 
 return ( 
 <ul className="comment-box"> 
 {list.map((entry, i) => ( 
 <li key={`reponse-${i}`} className="comment-item"> 
 <p className="comment-item-name">{entry.name}</p> 
 <p className="comment-item-content">{entry.content}</p> 
 </li> 
 ))} 
 </ul> 
 ); 
 } 
 } 
} 
ReactDOM.render( 
 <CommentList promise={fetch('/api/response.json')} />, 
 document.getElementById('root'));