params返回undefined componentWillReceiveProps后调用

Question

我有一个React组件，当点击一个按钮时，使用<Link />组件将用户带到不同日期的新URL，它应该呈现当天的事件/游戏（相同组件，但应该获取新的数据）。 URL更新，但this.params.day - 例如 - 返回未定义，但是当使用React Dev工具时，它在那里，我可以看到它，并在第二天更新......我依靠React Router的参数来抓取正确的数据，我有点卡住为什么我不能正确地重新呈现组件。下面是组件的重要组成部分：

class Games extends Component { 

    constructor(props){ 
    super(props); 

    this.state = { 
     loading: true, 
     games: [], 
     month: '', 
     day: '', 
     year: '', 
     nextDay: '', 
     prevDay: '' 
    }; 

    // this.prevDay = this.prevDay.bind(this); 
    // this.nextDay = this.nextDay.bind(this); 
    } 


    // set the state of the app based on the date 
    parseDate(){ 
    // if we have params in the url 
    if(this.props.params.month && this.props.params.day && this.props.params.year){ 
     this.setState({ 
     month: moment(this.props.params.month, 'MM').format('MM'), 
     day: moment(this.props.params.day, 'DD').format('DD'), 
     year: moment(this.props.params.year, 'YYYY').format('YYYY'), 
     }); 
    } else{ 
     // no params? set the date to today 
     this.setState({ 
     month: moment().format('MM'), 
     day: moment().format('DD'), 
     year: moment().format('YYYY'), 
     }); 
    } 
    console.log('Date parsed.'); 
    } 

    testProps(props){ 
    console.log('FIRED & Params: ' + this.props.params.day); 
    } 

    // generate previous day 
    prevDay(){ 
    let currentDate = this.state.month+this.state.day+this.state.year, 
     prevDate = moment(currentDate, 'MMDDYYYY').subtract(1, 'days').format('MM/DD/YYYY'); 
    this.setState({ 
     prevDay: prevDate 
    }); 
    } 

    // Generate next day 
    nextDay(){ 
    let currentDate = this.state.month+this.state.day+this.state.year, 
     nextDate = moment(currentDate, 'MMDDYYYY').add(1, 'days').format('MM/DD/YYYY'); 
    this.setState({ 
     nextDay: nextDate 
    }); 
    } 

    // Grab games for current day 
    getGames(){ 

    this.setState({loading: true}); 

    // error handling 
    function handleErrors(response) { 
     if (!response.ok) { 
     throw Error(response.statusText + 'POOP!'); 
     } 
     return response; 
    } 

    fetch(`http://mlb.mlb.com/gdcross/components/game/mlb/year_${this.state.year}/month_${this.state.month}/day_${this.state.day}/master_scoreboard.json`) 
    //fetch(`http://localhost:3000/inprogress.json`) 
    .then(handleErrors) 
    .then(response => response.json()) 
    .then(games => { 
     const gamesLoaded = games.data; 

     this.setState({ 
     games: gamesLoaded, 
     loading: false 
     }); 
    }) 
    .catch(error => this.setState({games: 'Error Finding Games'})); 
    console.log('Games fetched.'); 
    } 

    componentWillMount(){ 
    this.parseDate(); 
    console.log('Component Will Mount Fired'); 
    } 

    componentDidMount(){ 
    this.getGames(); 
    this.prevDay(); 
    this.nextDay(); 
    console.log('Component Mounted'); 
    } 

    componentWillReceiveProps(){ 
    this.parseDate(); 
    // this.testProps(); 
    console.log(this.props.params.day); 

    console.log('Component received props!'); 
    } 

这方面最重要的部分是parseDate()功能，因为它应该根据日期设置组件的状态，但在componentWillReceiveProps调用时PARAMS是不确定的，但是它们在React Dev Tools中可见。

任何想法和帮助，将不胜感激。谢谢！

Answer 1

componentWillRecieveProps接受了新道具的论点。你要像

componentWillReceiveProps(newProps) { 
    this.parseDate(newProps) 
} 

而且具有parseDate使用参数，而不是this.props。