Question

我有两个组成部分：

select totalTeams.team as hometeam,
  case when a.totalHomeGoals IS NULL THEN 0 ELSE a.totalHomeGoals END as totalHomeGoals,
  case when a.totalHomeAgainstGoals IS NULL THEN 0 ELSE a.totalHomeAgainstGoals END as totalHomeAgainstGoals,
  case when b.totalAwayGoals IS NULL THEN 0 ELSE b.totalAwayGoals END as totalAwayGoals,
  case when b.totalAwayAgainstGoals IS NULL THEN 0 ELSE b.totalAwayAgainstGoals END as totalAwayAgainstGoals
      from (select homeTeam as team from goals union select awayTeam from goals) as totalTeams 
      left join (select homeTeam as team, sum(homeTeamGoals) as totalHomeGoals,sum(awayTeamGoals) as totalHomeAgainstGoals from goals group by hometeam) as a on totalTeams.team=a.team
      left join (select awayTeam as team,sum(awayTeamGoals) as totalAwayGoals,sum(homeTeamGoals) as totalAwayAgainstGoals from goals group by awayTeam) as b on totalTeams.team=b.team 
      order by hometeam ;

}

和

class FloorView extends Component {
constructor (props) {
    super(props);
    this.state = {
        dateBegin: moment(),
        dateEnd: '2018-09-30'
    }
    this.setDateBeginHandler = this.setDateBeginHandler.bind(this);
}

setDateBeginHandler(date) {
    this.setState({
        dateBegin: date
    });
}

render() {
    return (
        <div className="FloorView">
            <div className="Toolbar">
                <DatePicker2 selected={this.state.dateBegin} onChange={this.setDateBeginHandler} />
                <DatePicker className="dateBegin" />
                <DatePicker className="dateEnd" />
            </div>
            <Room dateBegin={this.state.dateBegin.format("YYYY-MM-DD")} dateEnd={this.state.dateEnd} />
        </div>
    );
}

}

如果在FloorView中触发了处理程序setDateBeginHandler（），则会更改Room组件中的属性“ dateBegin”。如何调用setDesks（）再次获取数据？到目前为止，该更改没有任何影响。

谢谢。

Answer 1

您的问题的答案已在正式的React文档：https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops中提供。我将取出您实际需要的确切部分：

如果您需要因道具更改而产生副作用（例如，数据获取或动画），请改用componentDidUpdate生命周期。

根据文档，每当您需要执行API调用以响应道具更改时，请使用componentDidUpdate生命周期挂钩。

例如（我也从React Document看这个例子）：

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

根据示例，重新编写它以适合您自己的应用程序逻辑。

希望它会有所帮助。

Answer 2

可能您在componentDidUpdate生命周期方法中检查了道具的变化。

componentDidUpdate(prevProps) {
  if (prevProps.dateBegin !== this.props. dateBegin) {
    // your methods go here ...
  }
}

在此处检查文档：https://reactjs.org/docs/react-component.html#componentdidupdate

如果Room组件具有其自己的状态，则您也可以使用getDerivedStateFromProps()方法来跟踪道具更改并由于这些更改而更新Room组件的状态。文件：https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Answer 3

假设setDesks正在更新状态，如果您进行少量重构，则可以避免从componentDidUpdate进行额外重绘（它将呈现两次），因此setDesks需要几个额外的值（开始，结束）

然后您可以在会议室使用componentWillReceiveProps

一个例子是：

componentWillReceiveProps(nextProps) {
  if (this.props.dateBegin !== nextProps.dateBegin) {
    this.setDesks(1, nextProps.dateBegin, nextProps.dateEnd)
  }
}

更新在componentDidMount中获取的数据

3 个答案: