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。