Unturect typeError：无法读取未定义的属性（read react_app_base_url）

发布于 2025-02-13 21:41:29 字数 1123 浏览 1 评论 0原文

可能这是最重复的问题，但我仍然无法弄清楚是什么问题。

。

REACT_APP_BASE_URL= "http://localhost:3000/"

import axios from 'axios';

const customAxios = axios.create({
  baseURL: import.meta.env.REACT_APP_BASE_URL,
  headers: {
    Accept: '*/*',
    'Content-Type': 'application/json',
  },
  timeout: 5000,
});

export default customAxios;

const ApiConstants = {
  COMPANY: {
    ADD: () => {
      return 'company/';
    },
    FIND_ALL: () => {
      return 'company/';
    },
    FIND_ONE: (companyId) => {
      return 'company/' + companyId;
    },
  },
};
export default ApiConstants;

  const companyResponse = async () => {
    const response = await customAxios.get(ApiConstants.COMPANY.FIND_ALL);
    setCompanies([response.data]);
  }

AxiosSetup.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'REACT_APP_BASE_URL')
Error in event handler: TypeError: Cannot destructure property 'bookmark_everywhere' of 'config' as it is undefined.

原文

probably this is the most repeated question but I am still unable to figure out what is the issue.

.env file

REACT_APP_BASE_URL= "http://localhost:3000/"

AxiosSetup.js

import axios from 'axios';

const customAxios = axios.create({
  baseURL: import.meta.env.REACT_APP_BASE_URL,
  headers: {
    Accept: '*/*',
    'Content-Type': 'application/json',
  },
  timeout: 5000,
});

export default customAxios;

ApiConstants.ts

const ApiConstants = {
  COMPANY: {
    ADD: () => {
      return 'company/';
    },
    FIND_ALL: () => {
      return 'company/';
    },
    FIND_ONE: (companyId) => {
      return 'company/' + companyId;
    },
  },
};
export default ApiConstants;

This is where I am writing down the get request

  const companyResponse = async () => {
    const response = await customAxios.get(ApiConstants.COMPANY.FIND_ALL);
    setCompanies([response.data]);
  }

Errors I Have been getting:

AxiosSetup.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'REACT_APP_BASE_URL')
Error in event handler: TypeError: Cannot destructure property 'bookmark_everywhere' of 'config' as it is undefined.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南冥有猫 2025-02-20 21:41:29

当您声明环境时，变量不会在变量react_app_base_url和url http：// localhost：3000/之间留下任何空间细绳。

将.ENV声明替换为

react_app_base_url = http：// localhost：3000/

没有空间和报价！

要访问组件中的基本URL，您可以使用

process.env.react_app_base_url

更改您的axiossetup.js

import axios from 'axios';

const customAxios = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
  headers: {
    Accept: '*/*',
    'Content-Type': 'application/json',
  },
  timeout: 5000,
});

export default customAxios;

Happy Coding。

When you declare your environment variable do not leave any space between your variable REACT_APP_BASE_URL and your URL http://localhost:3000/ and you should remove double quote from your base URL string.

Replace your .env declaration as

REACT_APP_BASE_URL=http://localhost:3000/

No space and quote!

To access your base URL in your components you can use

process.env.REACT_APP_BASE_URL

Change your AxiosSetup.js

import axios from 'axios';

const customAxios = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
  headers: {
    Accept: '*/*',
    'Content-Type': 'application/json',
  },
  timeout: 5000,
});

export default customAxios;

Happy coding.

回复收藏 0 原文

~没有更多了~