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

最新推荐文章于 2024-08-31 09:28:34 发布

子禛

最新推荐文章于 2024-08-31 09:28:34 发布

阅读量1.8k

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_46740017/article/details/114378175

版权

本文探讨了在React项目中使用Context API处理异步数据加载的问题。具体介绍了如何通过Context API实现数据的全局共享，并在子组件中利用这些数据发起新的请求。同时，文章还讨论了解决异步数据加载导致的空对象问题的方法。

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

问题描述

今天里面写项目的时候出现了一个问题，就是根组件异步获取的数据需要使用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来进行控制。