我用React.js构建了一个电影Web应用程序。当我在API上调用数据时,数据工作正常。但是当我试图通过从API调用id
来切换页面时,数据变得未定义。我使用Redux工具包调用数据。
但是当我尝试按下卡时,我设置为从所选卡中获取其中一个数据的页面却像这样的图像
我试着检查控制台日志的结果如下。
如果你想检查代码
.env
sorry i can share api key
VITE_BASE_URL=https://api.themoviedb.org/3
VITE_IMG_PATH=https://image.tmdb.org/t/p/w500
VITE_VIDEO_PATH=https://api.themoviedb.org/3/movie
api.js
import Axios from 'axios'
export const movieList = Axios.create({
baseURL: `${import.meta.env.VITE_BASE_URL}`
})
action.js
import { createAsyncThunk } from "@reduxjs/toolkit";
import { movieList } from "../../service/api/api";
export const fetchMovieAll = createAsyncThunk('movie/fetchMovieAll', async() => {
try {
const api = `api_key=${import.meta.env.VITE_TMDB_KEY}`
const respone = await movieList.get(`discover/movie?${api}`)
return respone.data.results
} catch (error) {
return error
}
})
export const fetchMovie = createAsyncThunk('movie/fetchMovie', async(id) => {
try {
const respone = await movieList.get(`/movie/${id}?api_key=${import.meta.env.VITE_TMDB_KEY}`)
return respone.data.results
} catch (error) {
return error
}
})
slice.js
import {createSlice} from '@reduxjs/toolkit'
import * as movieAction from '../action'
const movieDb = createSlice({
name: 'movieDb',
initialState: {
loading: false,
data: [],
entity: {
id: null,
title: '',
release_date: '',
popularity: '',
poster_path: '',
overview: '',
vote_average: '',
backdrop_path: ''
},
error: null,
},
extraReducers: (builder) =>
builder.addCase(movieAction.fetchMovieAll.pending, (state) => {
state.loading = true
})
.addCase(movieAction.fetchMovieAll.fulfilled, (state, action) => {
state.loading = false,
state.data = action.payload
})
.addCase(movieAction.fetchMovieAll.rejected, (state) => {
state.loading = true,
state.error = action.payload
})
.addCase(movieAction.fetchMovie.pending, (state) => {
state.loading = true
})
.addCase(movieAction.fetchMovie.fulfilled, (state, action) => {
state.loading = false,
state.entity = action.payload
})
.addCase(movieAction.fetchMovie.rejected, (state) => {
state.loading = true,
state.error = action.payload
})
})
export default movieDb.reducer;
store.js
import { configureStore } from "@reduxjs/toolkit";
import movieDbReducer from '../slice'
export default configureStore({
reducer: {
movieDb: movieDbReducer,
}
})
CardMovie.jsx
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchMovieAll } from '../../../manage/action'
import style from './style.module.css'
import { useNavigate } from 'react-router-dom'
function CardMovie() {
const dispatch = useDispatch()
const {data} = useSelector((state) => state.movieDb)
const navigate = useNavigate()
const fetchDataMovie = async() => {
dispatch(fetchMovieAll())
}
const goToDetail = (id) => {
navigate(`/detail/${id}`)
}
useEffect(() => {
fetchDataMovie()
console.log(data)
},[])
return (
<>
{data.map((item) => {
return (
<div key={item.id} className={style['main-card']} onClick={() => goToDetail(item.id)}>
<div className={style['card-content']}>
<img src={`${import.meta.env.VITE_IMG_PATH}${item.poster_path}`} alt="poster" />
<div className={style['card-title']}>
<p>{item.title}</p>
</div>
</div>
</div>
)
})}
</>
)
}
export default CardMovie
Detail.jsx
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate, useParams } from 'react-router-dom'
import { fetchMovie } from '../../manage/action'
function Detail() {
const {id} = useParams()
const dispatch = useDispatch()
// const navigate = useNavigate()
const {entity} = useSelector((state) => state.movieDb)
const fetchDataMovie = async(movieId) => {
dispatch(fetchMovie(movieId))
}
useEffect(() => {
fetchDataMovie(id)
console.log(entity)
},[])
return (
<>
<div>
<h1>Detail</h1>
{/* <h5>{entity.title}</h5> */}
</div>
</>
)
}
export default Detail
App.jsx
import Home from "./page/Home"
import Genre from "./page/Genre"
import Detail from "./page/Detail"
import './App.css'
import {Outlet, RouterProvider, createBrowserRouter} from 'react-router-dom'
function App() {
const router = createBrowserRouter([
{
path: '/',
children: [
{
index: true,
element: <Home/>
},
{
path: 'genre',
element: <Genre/>
},
{
path: 'detail/:id',
element: <Detail/>
}
]
}
])
return (
<>
<RouterProvider router={router}/>
<Outlet/>
</>
)
}
export default App
index.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
import { Provider } from 'react-redux'
import store from './manage/store/index.js'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
)
我在做网站推荐。
如果我点击一些卡片,结果会变成这样
但我得到的是这个
和这个
1条答案
按热度按时间l7wslrjt1#
根据我所看到的,问题应该在这个API调用上
})
应该是