ReactJs：将 url 参数传递给外部函数

Question

我正在使用 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 总是未定义。

Answer 1

先将id参数保存到state中，然后使用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(
      ...
    )
  }