react应用stat总结
1.开发环境 react.js
2.电脑系统 windows10专业版
3.在应用React开发的过程中,咱们要应用state,相当于vue中的data,上面我来分享一下 state的应用和总结,如果总结的不好请勿喷,心愿对你有所帮忙!
4.在 constructor中增加如下代码:
this.state = { resObj:null, }5.在 reder(){}同级 定义一个函数:
// 页面已加载 就申请数据 chenget() { console.log("我是state的数据"); console.log(store.getState()); console.log("我是state的数据完结啦"); chenecharts().then((res) => { chenres = res; this.getres(res); //通过函数传参的形式 console.log(res); }) return re; }6.定义存储 函数:
getres(chenrespro){ console.log(chenrespro); this.setState({resObj:chenrespro},()=>{ console.log(this.state.resObj); }) }--成果如下:
7.整体代码代码如下:
import React from "react";import axios from 'axios'import { chenecharts } from '@/api/home'let chenres = undefined;export default class Home extends React.Component { constructor(props) { super(props); this.state = { xiaoxi: "会太累", chneresObj: undefined, resObj:null, } // 这个bind办法是必须的，以确保`this`能够在回调函数handleClick中应用 this.chenget = this.chenget.bind(this); } render() { //用一个变量,承受 const ChenHome = <div> <p> 我是home </p> <p> 我要坏加 </p> <a href="#/about" > 去about </a> <p>会哦加</p> </div> //完结啦 return (ChenHome ) ; } // 页面已加载 就申请数据 chenget() { console.log("我是state的数据"); console.log(store.getState()); console.log("我是state的数据完结啦"); let re = 123; chenecharts().then((res) => { chenres = res; this.getres(res); console.log(res); re = res; this.setState({ chneresObj: res }, () => { console.log(this.state.chneresObj); //留神:如果不加这个回调函数是看不到 批改的后果 }) }) return re; } getres(chenrespro){ // console.log(chenrespro); this.setState({resObj:chenrespro},()=>{ console.log("+++++++++++"); console.log(this.state.resObj); console.log("------------"); }) } componentWillMount() { } componentDidMount() { // 页面已加载 就申请数据 this.chenget(); let chnere = this.chenget(); console.log(chnere); }}8.getres() 函数的作用就是存储后盾的数据,哪里须要在哪里调用。
9.本期的教程到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰!