开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Get请求axios React js useEffect不工作(找不到模块'./undefined')

问题描述： Get请求axios React js useEffect不工作(找不到模块'./undefined')

回答：这个问题涉及到前端开发中使用axios库进行Get请求，以及React.js中的useEffect钩子函数。同时，还涉及到模块引入的问题。

axios是一个基于Promise的HTTP客户端，用于发送HTTP请求。它可以在浏览器和Node.js中使用。axios提供了简洁的API，可以轻松地发送异步请求，并处理响应数据。
React.js是一个用于构建用户界面的JavaScript库。它通过组件化的方式，使得开发者可以轻松地构建可复用的UI组件。useEffect是React.js提供的一个钩子函数，用于处理副作用操作，比如发送网络请求、订阅事件等。
在问题描述中提到了找不到模块'./undefined'的错误。这个错误通常是由于模块引入路径不正确或者模块不存在导致的。需要检查代码中的模块引入语句，确保路径正确，并且确保引入的模块存在。

综上所述，解决这个问题的步骤如下：

确保已经正确引入axios库。可以通过在代码文件的顶部添加以下语句来引入axios：
确保已经正确引入axios库。可以通过在代码文件的顶部添加以下语句来引入axios：
确保已经正确引入React.js库，并且在函数组件中正确使用了useEffect钩子函数。可以参考以下示例代码：
确保已经正确引入React.js库，并且在函数组件中正确使用了useEffect钩子函数。可以参考以下示例代码：
检查模块引入路径是否正确。根据错误信息'./undefined'，可以尝试查找代码中是否存在类似以下语句：
检查模块引入路径是否正确。根据错误信息'./undefined'，可以尝试查找代码中是否存在类似以下语句：
如果存在这样的语句，需要检查路径是否正确，并确保引入的模块存在。

推荐的腾讯云相关产品：腾讯云提供了丰富的云计算产品和服务，以下是一些与问题相关的产品和介绍链接：

云服务器（CVM）：提供弹性、安全、稳定的云服务器实例，可满足不同规模和需求的应用场景。详情请参考：云服务器
云函数（SCF）：无服务器计算服务，可实现按需运行代码的功能。详情请参考：云函数
云数据库 MySQL版（CDB）：提供稳定可靠的云数据库服务，支持高可用、备份恢复等功能。详情请参考：云数据库 MySQL版

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

相关搜索:使用useEffect不会导致无限循环的React axios get请求 Axios将请求放入React，Redux不工作为什么我的axios get请求不工作(登录)提交表单中的React js Axios Get请求 Axios (React) get请求从firebase返回403，但在postman上工作 PIXI导入不工作:找不到模块pixi.js 安卓上的Axios请求应用程序不工作，react原生 vue.js我如何使用axios .get我的代码不工作 React应用程序，从初始get请求获取数据后，onChange不工作 axios get请求更新对象的属性后，Vue.js中的HTML不更新 React.js:窗口调整大小事件侦听器不工作的useEffect 使用使用axios的get请求的结果填充一个对象(在React js中)Node.js请求与" request“模块一起工作，但不与"axios”一起工作使用get请求条件的react js : axios fecth数据:我希望名称的值为taken: true Axios请求在android最新api级别派中的React-native发布的apk中不工作吗？当我用React.js在Heroku中使用Axios执行GET请求时，我应该使用哪个基本url 当使用axios从react js调用spring boot get方法时，浏览器显示“请求已被CORS策略阻止”。在具有Node.js后端的React本机应用程序中使用Axios get请求时出现网络错误在具有axios get方法的react js中，请求的资源上不存在“Access-Control-Allow-Origin”标头

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

axios

import React, { useEffect } from "react"; import axios from 'axios' const Home:React.FC = () =>{...言归正传，如下是我们发起的一个get请求 import React, { useEffect } from "react"; import axios from 'axios' const Home:React.FC...请求的url、参数、请求方式(GET PUT POST DELETE)，默认的请求是GET请求，method其实可以不写。...import React, { useEffect } from 'react'; import axios from 'axios'; const Home: React.FC = () => {...返回结果也就会是[undefined,undefined] useEffect(() => { // get请求 const request1 = axios({ url: '

4K1 0

react进阶用法完全指南

CSS IN JS CSS-in-JS是一种模式，其中CSS由JS生成而不是在外部文件中定义，此功能不是React的一部分，而是由第三方库提供。...的使用和封装安装axios yarn add axios 引入axios import axios from 'axios' 发送get请求 axios({ url: "https://httpbin.org...: {name: 'kobe',age: 66}, method: 'post' }) 创建axios实例来实现个性化请求不同的服务器上面我们提到了创建公共请求的配置信息，但是有时候我们想要请求的...devBaseURL : proBaseURL; export const TIMEOUT = 5000; request.js中可以写下面的请求方法： import axios from "axios...Hook是React16.8中新增的特性，它可以让我们在不编写class的情况下使用state以及其他的React特性。

6K3 0

react 同构初步（3）

再回看首页列表的代码： // src/container/Index.js import React,{useState,useEffect} from 'react'; import {connect...因为没有客户端并未执行网络请求。这个问题也很好解决，还记得最初注释掉的useEffect吗？再客户端组件代码中，当发现数据为空时，执行网络请求即可。...模块: import axios from 'axios'; // 定义actionType const GET_INFO = 'INDEX/GET_USERINFO'; // actionCreator...server => { return (dispatch, getState, axiosInstance) => { // 返回promise return axios.get...以下是我的解决方案：留意到在store/user.js下getUserInfo，单独捕获axios错误后，页面不再报错。

1.6K3 0

react进阶用法指南

的使用和封装安装axiosyarn add axios引入axiosimport axios from 'axios'发送get请求axios({ url: "https://httpbin.org/..."] = "application/text"配置后的请求则可以这样写：const request1 = axios({ url: "/get", params: {name: "test",age...devBaseURL : proBaseURL;export const TIMEOUT = 5000;request.js中可以写下面的请求方法：import axios from "axios";import...Hook是React16.8中新增的特性，它可以让我们在不编写class的情况下使用state以及其他的React特性。...只能在React的函数式组件中调用Hook，不能在JS函数中调用。

5.1K2 0

实战 React 18 中的 Suspense

在 React 18 中，虽然仍然可以使用useEffect来完成一些事情，如使用 API 接口读取的数据填充状态，但实际上不应该将其用于此类目的。...Suspense 是什么简而言之，可能和你想的不同，Suspense 并不是一个新的用于获取数据的接口，因为该工作仍然由诸如“fetch”或“axios”等库委派执行，而它实际上允许你将这些库与 React...为此，我们需要使用以下函数包装我们的请求： // wrapPromise.js /** * 将promise包装，以便可以与React Suspense一起使用 * @param {Promise}...现在，我们需要使用它包装接口请求库（例子中是axios），创建一个非常简单的函数: //fetchData.js import axios from 'axios'; import wrapPromise...*/ function fetchData(url) { const promise = axios.get(url).then(({data}) => data); return

3801 0

Next.js的创建与使用

NextJs是React的服务器渲染框架，区别于官方SSRNext最大的特点是可以渲染出Ajax异步请求渲染出来的结果，本网站目前使用的前端框架就是NextJs 本文章默认你已将学会了React，如果你不会...axios.get("/message").then(res => { const index: number = Math.floor(Math.random() * res.data.data.length...在Next中最大的特点是会渲染异步请求的结果 import axios from "axios"; export default function Home({ data }) { return...一样NextJs支持CSS in Js和CSS模块化引入，但是与React不同的是import '..../index.css'必须在_app.js中引入使用@代替src文件夹原本Next.js创建之后是不会有src文件夹的但是我们可以创一个（相关文档），然后将样式、模块、组件路由等文件放进去（总之就是关于项目配置的不要放

4K2 0

React Hook概述

Hook 是 React 16.8 的新增特性，它可以让你在不编写 class 的情况下“钩入” React 的特性，例如，useState 是允许你在 React 函数组件中添加 state 的 Hook...，其返回值为当前的 state 以及更新 state 的函数 // src/comments/LikeButton.js import React, { useState } from 'react'...将会在执行清除操作时调用它 // comments/MouseTracker.js import React, { useState, useEffect } from 'react' function...import { useState, useEffect } from 'react' import axios from 'axios' const useURLLoader = (url) =>...(() => { setLoading(true) axios.get(url).then(result => { setData(result.data) setLoading

1K2 1

React + Node.js 全栈实战教程 - 手把手教你搭建「文件上传」管理后台

+ Axios + Node.js + Express 搭建「文件上传」管理后台 React + Nodejs 搭建带预览的「上传图片/预览」管理后台 React + Axios + Node.js...controllers/flileUploadController.js：配置 Rest API routes/index.js：路由，定义前端请求后端如何执行 server.js：Node.js入口文件...{ useState, useEffect, useRef } from "react"; import UploadService from ".....后端项目我们提供以下几个API POST /upload 文件上传接口 GET /files 文件列表获取接口 GET /files/[filename] 下载指定文件配置 Node.js 开发环境...Axios + Node.js + Express 搭建「文件上传」管理后台 React + Nodejs 搭建带预览的「上传图片/预览」管理后台 React + Axios + Node.js +

15.3K1 0

前端高级工程师（大前端）-慕K全栈开发

是一个模块打包工具，用于打包JavaScript模块。...javascriptimport React, { useState, useEffect } from 'react';import axios from 'axios';function App()...javascriptimport React, { useState, useEffect } from 'react';import { View, Text, TextInput, Button,...= require('react');const ReactDOM = require('react-dom');const axios = require('axios');function App...(''); React.useEffect(() => { axios.get('/api/tasks') .then(response => setTasks

2601 0

React Echarts 使用教程 - 如何在 React 中加入图表（内附数据看板实战搭建案例）

：位置：src/components/LineBarChart.js import { useEffect, useRef } from "react"; import \* as echarts...React Echarts 封装通用图表组件在 components 文件夹下新建 Chart.js 文件： import { useEffect, useRef } from "react"; import...首先，我们需要安装 antd 作为项目的 UI 框架，然后还需要安装 axios 来发送请求获取数据，还需要 dayjs 方便我们处理日期： yarn add antd axios dayjs 安装成功后...，日期等场景实现一个趋势图组件，用来显示币种的价格走势第一步，先封装一个工具类，在 src 目录下新建 utils 文件夹，然后新建 request.js 文件，用来处理请求发送： import axios...然后我们还需要发送请求，所以在 src 目录下新建 service 文件夹，新建一个 chartAPI.js，统一存放我们要发送的请求url： import { request } from "..

6.1K2 0

如何优雅的在react-hook中进行网络请求

本文将介绍如何在使用React Hook进行网络请求及注意事项。...本片文章通过简单的网络请求数据的demo，来一起进一步认识react-hook这一特性，增加理解，涉及到的hook有useState, useEffect, useReducer等。...](https://github.com/axios/axios)网络请求框架。...现在我们实现手动触发hook网络请求，修改代码如下，加一个按钮，点击按钮后获取以“redux”为关键词的列表数据 import React, {useState, useEffect} from 'react...demo讲述了react hooks部分API的使用及注意事项，这几个api也是平时开发工作中常见的，因此通过阅读本文，你应该可以收获如下内容： useState的使用 useEffect的使用及注意事项

9.1K7 3

React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发

React table 实战案例但是实际开发中的需求自然不会满足于本地数据，因此接下来我们演示一个更加真实、完整的例子，它将包含以下功能：模拟从远端请求数据，并且通过服务端进行分页、筛选、排序。...npm i react-table mockjs axios lodash.orderbynpm i axios-mock-adapter --save-devnpm i @material-ui/core...中请求 API 并展示：import React, { useState, useMemo, useEffect } from 'react'import axios from 'axios'import.../mock'mockAPI.start()function App() { const fetchOrders = async (params = {}) => { return axios.get...const [totalCount, setTotalCount] = useState(0)const fetchOrders = async (params = {}) => { return axios.get

16.8K0 1

Vite2+React+TypeScript：搭建企业级轻量框架实践

本文为原创文章，引用请注明出处，欢迎大家收藏和分享引言 Hello大家好，前段时间写了个Vue3的工程项目用起来还不错，其实老早前就想把它移植过来React这边，奈何工作比较忙一直拖到现在，才陆陆续续把杂七杂八的模块补充好...Redux Toolkit React的状态管理库历来就是轮子重灾区，各种设计模式层出不穷，这里就不多介绍了。.../user'; // 初始化axios Request.init(); export default { box, user // ...其他请求模块 }; 这里的Request是请求中心的类对象...至此，我们就能愉快使用axios去请求数据了。 // api模块→请求中心 import { Request } from './request'; userInfo: (options?...其实通过模块分割加载后，首页的js包通过gzip压缩到4.3kb。当然真实场景是，项目部署上云服务器后肯定达不到本地资源加载速度，但可以通过CDN来加速优化，其效果也比较显著。

1.8K1 0

超详细的React组件设计过程-仿抖音订单组件

前言作为数据驱动的领导者react/vue等MVVM框架的出现,帮我们减少了工作中大量的冗余代码, 一切皆组件的思想深得人心。...笔者将会通过实战抖音订单组件详细的介绍组件的设计思路和方法，对新手特别友好，希望对前端新手们和有一定工作经验的朋友有一定帮助~ 前期准备在组件设计之前，希望你对css、js具有一定的基础。...称之为css in js，现在正在成为在 React 中设计组件样式的新方法。...=> axios .get('https://www.fastmock.site/mock/759aba4bef0b02794e330cccc1c88555/beers/order'...from 'axios' // 请求推荐商品数据 export const getCommend = () => axios.get('https:/

1111 0

Vite2+React+TypeScript：搭建企业级轻量框架实践

本文为原创文章，引用请注明出处，欢迎大家收藏和分享引言 Hello大家好，前段时间写了个Vue3的工程项目用起来还不错，其实老早前就想把它移植过来React这边，奈何工作比较忙一直拖到现在，才陆陆续续把杂七杂八的模块补充好...Redux Toolkit React的状态管理库历来就是轮子重灾区，各种设计模式层出不穷，这里就不多介绍了。.../user'; // 初始化axios Request.init(); export default { box, user // ...其他请求模块 }; 这里的Request是请求中心的类对象...至此，我们就能愉快使用axios去请求数据了。 // api模块→请求中心 import { Request } from './request'; userInfo: (options?...其实通过模块分割加载后，首页的js包通过gzip压缩到4.3kb。当然真实场景是，项目部署上云服务器后肯定达不到本地资源加载速度，但可以通过CDN来加速优化，其效果也比较显著。

2.1K2 0

React Native跨平台开发实战：从零到一

环境准备安装Node.js安装React Native CLI设置Android或iOS开发环境（取决于你想要支持的平台）2....添加样式可以在App.js中或者单独的styles.js文件中添加CSS样式： import React from 'react'; import { View, Text, StyleSheet...网络请求使用axios库进行HTTP请求： npm install axios在组件中发送请求： import React, { useState, useEffect } from 'react...'; import axios from 'axios'; const HomeScreen = () => { const [data, setData] = useState(...[]); useEffect(() => { axios.get('https://jsonplaceholder.typicode.com/posts') .

3561 0

全栈 Todolist-client 篇(React Typescript)

npx create-react-app client --template typescript // npm 也可以 /** * 除了调用项目内部模块，npx 还能避免全局安装的模块。...* 比如，create-react-app这个模块是全局安装，npx 可以运行它， * 而且不进行全局安装。...为了方便 api 的获取，这边定义新的一条 todo 和旧数据 todos 3、构建请求接口的 API（源码参考） src/API.ts import axios, { AxiosResponse...> => { try { const todos: AxiosResponse = await axios.get( baseUrl + "/todos" ) return..., { useEffect, useState } from 'react' import TodoItem from '.

5532 0

高性能GO企业级APM监控系统实战（高の青）

可视化界面: 使用React和D3.js构建前端仪表盘。...1.2 技术栈编程语言: Go框架: Gin (HTTP Web框架)数据库: InfluxDB / Prometheus前端: React + D3.js2....数据存储模块3.1 使用InfluxDB存储数据安装InfluxDB Go客户端：go get github.com/influxdata/influxdb-client-go/v2然后可以定义一个写入...前端展示模块5.1 创建React前端使用create-react-app快速创建前端项目：npx create-react-app apm-dashboardcd apm-dashboardnpm install...// src/Dashboard.jsimport React, { useEffect, useState } from 'react';import axios from 'axios';const

2981 0

如何在React或Vue中使用Angular 的 Rxjs API服务

这意味着下面的代码可以工作在Vue.js或 React中。 RxJS是一个库，通过使用可观察序列来组合异步和基于事件的程序。...创建新的.ts或.js文件，我将其命名为task.ts(因为我在这里使用typescript) import Axios, { AxiosObservable } from "axios-observable..._instance = new this()); } indexTask():AxiosObservable { return Axios.get<any(`https:/.../example.com/api/index`); } showTask(id:number):AxiosObservable { return Axios.get<any...组件中使用 import { useEffect, useState } from "react"; import { _TaskService } from "src/services/Task.Service

1.8K1 0

React 设计模式 0x6：数据获取

import React from "react"; function App() { const [data, setData] = React.useState(null); React.useEffect...Axios 是一个基于 Promise 的 node.js 和浏览器 HTTP 客户端。...在服务器端，它使用本地的 node.js http 模块，而在客户端（浏览器）中，它使用 XMLHttpRequests。...安装： npm install axios 使用： import React from "react"; function App() { const [data, setData] = React.useState...(null); React.useEffect(() => { axios.get("https://api.example.com/items").then((response) =>

1.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭