Params Return componentWillReceivePropsの後に定義された

Question

ボタンをクリックすると、<Link />コンポーネントを使用して別の日の新しいURLに移動し、その日のイベント/ゲームをレンダリングする必要があるReactコンポーネントがあります新しいデータを取得する必要があります）。 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) 
} 

ような何かをしたいし、代わりに this.propsの引数を使用し parseDate持っています。