Question

当状态发生变化时，我试图使我的组件发出新请求。我相信我了解生命周期方法，但是当日期状态更改时，我无法设法使组件发出新请求。

我已将componentWillUpdate与prevState一起使用，其中prevState返回更新的状态，而不是先前的日期。

任何能帮助我朝正确方向发展的东西。

FunctionSampler

Answer 1

听起来像您要componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  if (!this.state.date.isSame(prevState.date)) {
    // do request
  }
}

Answer 2

根据React doc，UNSAFE_componentWillUpdate将很快被弃用。

顺便说一句，此函数签名为UNSAFE_componentWillUpdate(nextProps, nextState)，这就是为什么您获得更新状态的原因。

您应该考虑将axios get请求提取到一个函数内，该函数可以在componentDidUpdate生命周期方法内调用：

this.state = {
   date: moment(),
   bookings: []
}

componentDidUpdate(prevProps, prevState) {
    if (this.state.date.valueOf() !== prevState.date.valueOf()) {
        this.getBookings();
    }
}

componentWillMount() {
    this.getBookings();
}

getBookings = () => {
    const { course } = this.props.match.params;
    const payload = {
        startDate: this.state.date.format('MM-DD-YYYY'),
        endDate: this.state.date.add(1, 'd').format('MM-DD-YYYY')
    }


    axios.get(`/api/booking/find/${course}? startDate=${payload.startDate}&endDate=${payload.endDate}`).then(response => {
        this.setState({
            bookings: response.data
        })
    });
}

onNext = () => {
    this.setState({
        date: this.state.date.add(1, 'd')
    })
}

onPrev = () => {
    this.setState({
        date: this.state.date.subtract(1, 'd')
    })
}

重新请求状态更改反应

2 个答案: