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的内容是否相等，然后触发状态更改。您可以像这样使用isEqual中的lodash，并用：

替换相等性检查

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

道具更改时更新组件状态

2 个答案: