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参数保存到状态，然后使用 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(
      ...
    )
  }

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

1 个答案: