【ReactJs学习笔记】【状态State && 用JQ和ajax从服务器端得到数据】

版权声明：本文为博主原创文章，未经博主允许不得转载。（github:KuanG97） https://blog.csdn.net/m0_37136491/article/details/81666322

【Javascript学习笔记】

目录

---

数据准备

传递数据的链接

index.js

- var commen = [
-     { "author": "KXX", "date": "2018-8-17", "text": "天气不错！" },
-     { "author": "KXX2", "date": "2018-8-17", "text": "天气不错2！" }
- ];

- ReactDOM.render(<App data={comments} />, document.getElementById('root'));
+ ReactDOM.render(<App url="./comments.json" />, document.getElementById('root'));

模拟数据

新建一个comments.json到index.html文件的目录里，用json文件模仿服务器请求的链接获取数据。
comments.json

[
    { "author": "KXX", "date": "2018-8-17", "text": "天气不错！" },
    { "author": "KXX2", "date": "2018-8-17", "text": "天气不错2！" }
]

---

JQuery准备

安装jspm包管理

在本地目录安装包管理

下载JQuery

检查依赖配置

---

状态State

CommentBox .js

...

+ import $ from 'jquery';

class App extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      data:[],
+    };
+  }

  render() {

...
-        <CommentBox data={this.props.data} />
+        <CommentBox data={this.state.data} />

...

通过构建构造函数，准备用于放置从父组件获取的数据的容器— —state状态汇中

---

JQuery&&Ajax

...

  constructor(props){

    ...

    console.log(this.props.url);
    $.ajax({
      url:this.props.url,
      dataType:'json',
      cache:false,
      success:comments => {
        this.setState({
          data:comments
        });
      },
      error:(xhr,status,error) => {
        console.log(error);
      }
    });
  }

通过this.setState获取数据后实现状态更新。

效果

---

更新获取数据的状态

App.js

...

  constructor(props){
    ...

    this.getComments();
    setInterval(() => this.getComments(),5000);//每五秒更新请求
  }

  getComments(){
    $.ajax({
      url:this.props.url,
      dataType:'json',
      cache:false,
      success:comments => {
        this.setState({
          data:comments
        });
      },
      error:(xhr,status,error) => {
        console.log(error);
      }
    });
  }

...

---

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~

---