道具更改时更新组件状态

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;
  }