道具更改時更新組件狀態

Question

我有一個輪播組件，可以接收輪播項目作為道具。 我將當前活動的輪播項目存儲在輪播組件的狀態下。 輪播本身是一個滑塊，並由可拖動的GSAP控制。 輪播項目的數量可能會更改，然后我想重置狀態，以便第一個項目處於活動狀態。 如何使用當前的React版本實現這一目標？ 我試過了：

static getDerivedStateFromProps(props, state) {
  if (state.openItem > props.items.length) {
    return {
      openItem: 0,
    };
  }
  return null;
}

但這只會在當前項目大於項目總數時重置。 我想要一種可以比較prevProps的方式，以便可以檢查項目總數是否已更改。 如果在componentDidUpdate中設置狀態，則可能會導致無限循環的渲染循環。 我不想將狀態拉到父組件，因為那樣會使父組件需要過多的功能才能使輪播組件可重用。

Answer 1

將items存儲在狀態中，然后使用getDerivedStateFromProps這樣：

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.items.length !== prevState.items.length) {
    return {
      openItem: 0,
      items: nextProps.items
    };
  }
  return null;
}

這是罰款的要求，但最好你應該想出一個辦法來檢查的內容平等items再火的狀態變化。 您可以像這樣從lodash使用isEqual並將相等檢查替換為：

if (_.isEqual(nextProps.items.length, prevState.items.length))

*請注意， isEqual執行深入的相等檢查，並且可能會對性能產生影響。

Answer 2

您可以使用getSnapshotBeforeUpdate（）方法比較prevProps，以便檢查項目總數是否已更改。

getSnapshotBeforeUpdate(prevProps, prevState) {
    // you can compare the previous prop value and previous state value as per you requirement
    if (prevProps.openItem.length > prevState.openItem.length) {
      // your code
    }
    return null;
  }