React Redux 不能传递功能组件的 props

Question

我在这里试图实现的是能够单击图像并渲染单击电影的信息。问题是我找不到匹配点击的电影和详细电影的ID的方法。因此，单个电影请求具有未定义的 id，这会导致 404 错误。这是代码沙箱链接：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>

Answer 1

"initializeSingleMovie"是一个动作，你给它命名为reducer但它是一个动作，为了解决这个问题，你必须使用mapDisptachToProps和dispatch(它会访问存储方法(，下面是一个修改后的Movie.js File.In 以后有一个单独的动作文件夹用于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)