目标:我使用Youtube v3 RapidAPI为我的React + Vite.js项目获取“建议的视频”数据。但是,出现了一个错误,我不知道该怎么做,根文件夹中的文件. env,语法都是正确的(见下面的照片)。也许问题出在process.env中。但我不知 prop 体是什么。package.json中的所有依赖项都是最新的。另外,我登录并订阅了RapidAPI。
如何从RapidAPI获取数据:
import axios from 'axios';
const NODE_ENV = process.env.NODE_ENV;
const BASE_URL = 'https://youtube-v31.p.rapidapi.com';
const options = {
params: {
maxResults: '50'
},
headers: {
'X-RapidAPI-Key': NODE_ENV.REACT_APP_RAPID_API_KEY,
'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'
}
};
export const fetchFromAPI = async (url) => {
const { data } = await axios.get(`${BASE_URL}/${url}`, options);
return data;
};
如何解析数据:
import React, { useState, useEffect } from 'react';
import { Box, Stack, Typography } from '@mui/material';
import { fetchFromAPI } from '../utilities/fetchFromAPI';
import { Videos } from './';
function Feed() {
const [selectedCategory, setSelectedCategory] = useState('New');
const [videos, setVideos] = useState([]);
useEffect(() => {
fetchFromAPI(`search?part=snippet&q=${selectedCategory}`)
.then((data) => setVideos(data.items));
}, [selectedCategory]);
return (
<Videos videos={videos} />
)
}
export default Feed;
照片:How Error looks like:My Directory
.env文件:
REACT_APP_RAPID_API_KEY='91766d6993msh3bd85c80e2cd0a0p118319jsn781536a29badqsw'
1条答案
按热度按时间pdtvr36n1#
您可以通过以下方式访问
env
变量而不是
process.env.NODE_ENV.REACT_APP_RAPID_API_KEY
。NODE_ENV是一个字符串类型,所以当从
string
值访问REACT_APP_RAPID_API_KEY
时,会出现类型错误。另外,
process.env.NODE_ENV
表示当前节点的模式,即通常为production
或development
或test
。