javascript - 正确替换已弃用的componentWillUpdate，以进行状态更改之后需要直接执行的状态检查(Properly replacing deprecated componentWillUpdate for state checks that need to be performed directly after state change and before anything else)

Question

Objective:(目的：)

I'm filtering search results for purchases by two attributes: tour and event .

(我按两个属性过滤了purchases的搜索结果： tour和event 。)

Purchases belong to events.

(购买属于事件。)

Events belong to tours.

(活动属于旅行团。)

When a selectedTour filter changes, I want all selectedEvent filters to be reset before the fetchPurchases() function gets called (code referenced below).

(当selectedTour过滤器更改时，我希望在调用fetchPurchases()函数之前将所有selectedEvent过滤器重置（下面引用的代码）。)

Code reference:(代码参考：)

Here are my select elements:

(这是我的select元素：)

<select name="selectedTour" onChange={this.changeFilter} value={selectedTour}>
  <option value="" disabled defaultValue>Tour</option>
  <option value="">All</option>
  {tours.map(tour => <option value={tour.id} key={tour.id}>{tour.name}</option>)}
</select>
<select name="selectedEvent" onChange={this.changeFilter} value={selectedEvent}>
  <option value="" disabled defaultValue>Event</option>
  <option value="">All</option>
  {events.map(event => <option value={event.id} key={event.id}>{event.venue}</option>)}
</select>

And my function to change the states:

(和我改变状态的功能：)

changeFilter = e => {
  const {name, value} = e.target
  this.setState({[name]: value}, () => {
    this.fetchPurchases()
  })
}

An example data structure is as follows:

(数据结构示例如下：)

{ tours: [
  { tour_id: 1,
    events: [
      { event_id: 1,
        purchases: [
          { purchase_id: 1 },
          { purchase_id: 2 },
          { purchase_id: 3 },
        ]
      }, 
      { event_id: 2,
        purchases: [
          { purchase_id: 4 },
          { purchase_id: 5 },
          { purchase_id: 6 },
        ]
      }
    ]
  },
  { tour_id: 2,
    events: [
      { event_id: 3,
        purchases: [
          { purchase_id: 7 },
          { purchase_id: 8 },
          { purchase_id: 9 },
        ]
      },
      { event_id: 4, 
        purchases: [
          { purchase_id: 10 },
          { purchase_id: 11 },
          { purchase_id: 12 },
        ]
      }
    ]
  }
]}

When setting a tour filter of 1, I want events 1 and 2 to be returned.

(将巡视过滤器设置为1时，我希望返回事件1和2。)

Then I can set the event to 2 and get purchases 4, 5, and 6 returned.

(然后，我可以将事件设置为2，并返回购买4、5和6。)

Obstacle:(障碍：)

For clarity: selectedTour and selectedEvent are state values.

(为了清楚起见： selectedTour和selectedEvent是state值。)

If selectedTour is 1, and selectedEvent is 1, I'll get purchases 1, 2, and 3.

(如果selectedTour为1， selectedEvent为1，我将获得购买1、2和3。)

However, if selectedTour is changed to 2, and selectedEvent is still 1, I'll get no purchases, because there are no matching purchases with event of 1 and tour of 2. So I need to reset selectedEvent whenever selectedTour is changed, so all events for that tour are included in the filter.

(但是，如果selectedTour更改为2，并且selectedEvent仍为1，则不会获得任何购买，因为没有匹配的购买，事件1为游览，游览为2。因此，只要selectedTour更改，我就需要重置selectedEvent ，因此所有该游览的事件包含在过滤器中。)

I know state changes happen asynchronously, and must be passed a callback function if you want the state changes to be reflected on the data referenced in that function.

(我知道状态更改是异步发生的，如果您希望状态更改反映在该函数引用的数据中，则必须将其传递给回调函数。)

So when this.fetchPurchases is called, the state of the data it's using is never current.

(因此，在this.fetchPurchases时，其使用的数据的状态永远不会是当前的。)

For this type of situation before componentWillUpdate() was deprecated, I'd simply use the following comparison:

(对于不推荐使用componentWillUpdate()之前的这种情况，我将使用以下比较：)

componentWillUpdate(nextProps, nextState) {
  if (nextState.selectedTour !== this.state.selectedTour) {
    this.setState({selectedEvent: ''})
  }
}

This resets the states whenever selectedTour changes happen, regardless of where it happens in the component.

(每当 selectedTour发生更改时，无论组件在何处发生，这都会重置状态。)

I love using this lifecycle method because it keeps my update functions clean, and I only have to do it once.

(我喜欢使用这种生命周期方法，因为它可以使我的更新功能保持整洁，并且只需要执行一次即可。)

However, now that the function is deprecated, I can only check for a change in selectedTour after it's been changed.

(但是，既然该函数已被弃用，我只能在更改之后对selectedTour进行更改检查。)

I suppose I could append a callback function after the state change, which then passes the this.fetchPurchases() function as yet another callback... But I can see this type of strategy getting messy very quickly, and potentially going many levels deep, with tons of nested callbacks.

(我想我可以在状态更改后附加一个回调函数，然后再将this.fetchPurchases()函数作为另一个回调传递...但是我可以看到这种类型的策略很快变得混乱，并且可能深入很多层次，与大量的嵌套回调。)

Keep in mind that this is just one simple example I'm using, so I'm trying to devise a strategy to manage all state updates that are similar to this.

(请记住，这只是我正在使用的一个简单示例，因此我试图设计一种策略来管理与此类似的所有状态更新。)

Are there any similar lifecycle methods that get called right before a state update?

(是否有任何类似的生命周期方法在状态更新之前被调用？)

Or right after a state update and before anything else?

(还是在状态更新之后以及其他任何事情发生之前 ？)

I've tried implementing getSnapshotBeforeUpdate() , but fetchPurchases() still gets called before I can reset selectedEvent .

(我已经尝试实现getSnapshotBeforeUpdate() ，但是在我可以重设selectedEvent之前，仍会调用fetchPurchases() 。)

  ask by Doug translate from so

Answer 1

等待大神答复