我要在此处实现的目标是能够点击图片并呈现所点击的电影的信息。问题是我找不到匹配点击的电影和详细电影的ID的方法。结果,singleMovierequest具有未定义的ID,这会导致404错误。这是codesandbox链接:https://codesandbox.io/s/modern-http-coy0w(Api键有意键入为“ ???”)。这是电影和应用程序组件。
const Movie = (props) => {
const movie = props.singleMovie
const fetchMovie = props.initializeSingleMovie
useEffect(() => { fetchMovie(props.id) }, [props.id])
return (
<div>
<h2>{movie.title}</h2>
<p>{movie.overview}</p>
</div>
)
} 渲染应用程序组件的一部分:
<Container>
<h2>Movieapp</h2>
<Router>
<Menu />
<Route exact path="/popular" render={() =>
<PopularMovies />
} />
<Route exact path="/search" render={() =>
<Movies />
} />
<Route exact path="/search/:id" render={(props) => <Movie key={props.match.params.id} />} />
} />
<Route exact path="/popular/:id" render={(props) => <Movie key={props.match.params.id} />} />
</Router>
</Container>
答案 0 :(得分:1)
“ initializeSingleMovie”是一个动作,您将其命名为reducer但它是一个动作,为了解决此问题,您必须使用mapDisptachToProps和dispatch(它将访问存储方法),下面是经过修改的Movie.js文件。将来会为api命中提供一个单独的操作文件夹。更多信息,希望它会有所帮助。
import React from 'react'
import { connect } from 'react-redux'
import { useEffect } from 'react'
import { initializeSingleMovie } from '../reducers/singleMovieReducer'
const Movie = (props) => {
console.log(props,"");
const movie = props.singleMovie
props.initializeSingleMovie(props.id)
return (
<div>
<h2>{movie.title}</h2>
<p>{movie.overview}</p>
</div>
)
}
const mapStateToProps = (state) => {
return {
singleMovie: state.singleMovie
}
}
const mapDispatchToProps = dispatch => {
return {
initializeSingleMovie: (id) => dispatch(initializeSingleMovie(id)),
};
};
export default connect(
mapStateToProps,
mapDisptachToProps
)(Movie)