Javascript 当道具更改时更新组件状态

我有一个转盘组件，它接收转盘项目作为道具。我正在以旋转木马组件的状态存储当前活动的旋转木马项目。转盘本身是一个滑块，由GSAP可拖动控制。转盘项目的数量可能会更改，然后我想重置状态，以便第一个项目处于活动状态。如何使用当前的React版本实现这一点？我试过：

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

---

但只有当当前项目大于项目总数时，此选项才会重置。我想有一种方法，我可以比较prevProps，这样我就可以检查项目的总数是否发生了变化。如果在componentDidUpdate中设置状态，可能会导致无休止的渲染循环。我不想提取父组件的状态，因为这会使父组件需要太多的功能才能使旋转木马组件可重用。

您可以使用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;
  }

---

您可以使用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;
  }

---

将

项存储在状态中，然后像这样使用
getDerivedStateFromProps
：

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

这对于需求来说很好，但理想情况下，您应该找到一种方法来检查
项的内容是否相等，然后触发状态更改。您可以像这样使用
lodash
中的
isEqual
，并将相等性检查替换为：

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

*请注意，
isEqual
执行深度相等检查，可能会影响性能。
将
项存储在状态中，然后使用
getDerivedStateFromProps
，如下所示：

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

这对于需求来说很好，但理想情况下，您应该找到一种方法来检查
项的内容是否相等，然后触发状态更改。您可以像这样使用
lodash
中的
isEqual
，并将相等性检查替换为：

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

*请注意，
isEqual
执行深度相等性检查，可能会影响性能。
但是我仍然需要进入componentDidUpdate并在那里设置状态，对吗？至少我在文档中看到了这一点：但是我仍然需要进入componentDidUpdate并在那里设置状态，对吗？至少我在文档中看到了这一点：谢谢，我实际上同时提出了一个类似的解决方案。我将对象的散列从外部传递到组件中，我将其设置在状态内部。然后在getDerivedStateFromProps中，我将新哈希与状态中的旧哈希进行比较。如果它们不匹配，我会重置openItem。但是从外部发送散列不会给旋转木马的消费者增加额外的责任吗？是的，你是对的，最好在组件内部计算。我这样做是因为我将实际组件作为道具传递，所以我不确定在数据相同的情况下，对这些数据进行散列是否仍然会得到相同的散列。谢谢，在此期间，我实际上提出了一个类似的解决方案。我将对象的散列从外部传递到组件中，我将其设置在状态内部。然后在getDerivedStateFromProps中，我将新哈希与状态中的旧哈希进行比较。如果它们不匹配，我会重置openItem。但是从外部发送散列不会给旋转木马的消费者增加额外的责任吗？是的，你是对的，最好在组件内部计算。我这样做是因为我将实际组件作为道具传递，所以我不确定当数据相同时，对这些数据进行散列是否仍然会得到相同的散列。