Question

我有一个React组件，当单击一个按钮时，使用<Link />组件将用户带到另一天的新URL，它应该呈现当天的事件/游戏（相同的组件但是应该获取新数据）。 URL更新，但this.params.day - 例如 - 返回undefined，但是当使用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中调用时，参数是未定义的，但它们是可见的在React Dev Tools中。

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

Answer 1

componentWillRecieveProps对新道具进行论证。你想要像

这样的东西

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

让parseDate使用参数而不是this.props。

params在componentWillReceiveProps调用

1 个答案: