Params Return Undefiniert nach componentWillReceiveProps mit dem Namen

Question

Ich habe eine React-Komponente, die beim Klicken auf eine Schaltfläche den Benutzer zu einer anderen URL für einen anderen Tag mit der Komponente <Link /> bringt und die Ereignisse/Spiele für diesen Tag rendern soll Komponente sollte aber neue Daten holen). Die URL aktualisiert sich, aber die this.params.day - zum Beispiel - gibt undefined zurück, aber wenn ich die React Dev Tools benutze, ist es da und ich kann es sehen, und es wurde für den nächsten Tag aktualisiert ... Ich verlasse mich auf React Routers Params Korrekte Daten, ich bin ein wenig fest, warum ich es nicht bekomme, um die Komponenten richtig zu rendern. Hier sind die wichtige Teile der Komponente:

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!'); 
    } 

Der wichtigste Teil davon ist die parseDate() Funktion, da sie den Zustand der Komponente basierend auf festgelegte Zeit sollen, aber wenn in componentWillReceiveProps die params sind undefiniert genannt, aber sie sind in React Dev Tools sichtbar.

Alle Gedanken und Hilfe würden geschätzt werden. Vielen Dank!

Answer 1

componentWillRecieveProps nimmt ein Argument der neuen Requisiten. Sie wollen so etwas wie

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

Und haben parseDate das Argument anstelle von this.props.