我正在使用redux处理同构反应应用程序。我在将url参数传递给调度redux操作的函数时遇到问题。
class SingleMovie extends Component {
componentDidMount(){
console.log(this.props.match.params.id); // i can access the id here
}
.....
}
function mapStateToProps(state){
return {movie:state.movie};
}
function loadData(store, id){ //<--how do i get the id parameter
return store.dispatch(fetchMovie(id)); //<--so i can pass it here
}
export default {
loadData,
component: connect(mapStateToProps,{fetchMovie})(SingleMovie)
};
我尝试了什么:
(1)在React组件之外声明一个常量
let id = "";
class SingleMovie extends Component {
...
(2)尝试使用id
分配全局变量componentDidMount(){
id= this.props.match.params.id;
}
ID始终未定义。
答案 0 :(得分:0)
首先将id参数保存到状态,然后使用 setState的回调函数调度 fetchMovie 操作。
class SingleMovie extends Component {
constructor(){
this.state = {
id: ""
}
}
componentDidMount(){
//console.log(this.props.match.params.id);
this.getMovieId(this.props.match.params.id);
}
getMovieId = (movieId) => {
this.setState({
id: movieId
}, () => {
this.loadData();
})
}
loadData = (store) => {
store.dispatch(fetchMovie(this.state.id));
}
render(){
return(
...
)
}