react的异步的传递问题（解决方案）

2021-03-04 22:34:01 阅读：140 来源： 互联网

标签：异步 res globleContext child react context 解决方案组件 import

问题描述

今天里面写项目的时候出现了一个问题，就是根组件异步获取的数据需要使用React的context，把异步获取的数据存储全局的context中，并在子组件中使用这个context的数据，并用获取到的context再次发起一个其他的请求。这个时候就会出现一个问题，异步获取的数据，在有些时候（数据相应比较慢的时候）。子组件拿到的是一哥空对象，但是我们需要基于这个对象再次发起请求，但是拿到的是一个空对象。

解决

我进行了一次模拟。结构如下.

<app>
	<child></child>
</app>

首先我们先创建一个context的文件，把所有有关context的内容封装起来。

//globleContext.js
import React from "react";

export const globalData = {
  a: "dawbdhawbj"
}
export const globleContext = React.createContext(globalData)

我在app组件中进行第一次数据的请求如下

//app.js
import React from "react";
import  Child from "./compons/child";
import Axios from "axios";
import { globleContext , globalData } from "./globleContext";

const { Provider } = globleContext;

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      a: globalData.a
    }
  }
  componentDidMount(){
    Axios.get("http://localhost:3000/article/test").then(res => {
      this.setState({
        axiosData : res.data.data
      })
      console.log(res.data)
      //undefind 
      //有些时候会返回我想要的值，但是有写时候会返回一个空对象
      //(我测试接口用的是node写的，定时器2s在返回数据。所以这里是undefind)
    })
  }
  render(){
    return (
        <div className="App">
          <Provider value={this.state.axiosData}>
              <Child></Child>
          </Provider>
        </div>
    );
  }

}

export default App;

下面我们在看看child.组件。这里我写了两种方式。一种函数组件中/一种class形式的。

//child.js （函数组件）
import React,{ Component , useEffect ,useState } from "react";
import { globleContext } from "../Globle";
import Axios from "axios";


function child(params) {
const [TreeData,setTreeData] = useState([])
const context = React.useContext(globleContext)
console.log(context)
  useEffect( () => {
    console.log("数据变化了")
    if(context){
      if(TreeData.length == 0){
        Axios.get("http://localhost:3000/article/testapi/").then(res => {
          console.log(res,"这是数据222")
          setTreeData(res.data.data)
        })
      };

    }
  })
  return (
    <div>
      这是child组件顶顶顶:{TreeData}
    </div>
  )
}
// child.contextType = globleContext;
export default child;

import { Component } from "react";
import { globleContext } from "../Globle";
import Child from "./child";
import Axios from "axios";


class tree extends Component {
  constructor(){
    super()

    this.state = {
      TreeData:[]
    }
  }
  componentDidMount(){

  }
  componentDidUpdate(prevProps,prevState){
    if(this.context){
      if(this.state.TreeData.length == 0){
        Axios.get("http://localhost:3000/article/testapi/").then(res => {
          this.setState({
            TreeData:res.data.data
          })

        })
      };

    }
  }
  render() {
    return ( 
      <div>
        父组件：{this.context ? "数据来了" : "目前没有数据"}
        {/* <Child></Child> */}
        <br/>
        {this.state.TreeData}
      </div>
     );
  }
}
tree.contextType = globleContext 

export default tree;

这里可以看到，我使用了 componentDidUpdate ，这里我在componentDidUpdate的使用了if判断。因为每次this.setState()都会触发componentDidUpdate这个方法。因此我们在componentDidUpdate 中使用 this.setState() 就会无限循环。所以我们使用if来进行控制。

标签：异步,res,globleContext,child,react,context,解决方案,组件,import
来源： https://blog.csdn.net/qq_46740017/article/details/114378175

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react的异步的传递问题（解决方案）

问题描述

解决