react-hooks/exhaustive deps警告还是无限循环？

Question

我有一个mediaType变量，当它改变时，需要过滤currentSelectedMedia。在这个场景中，我得到了react-hooks/exhaustive-deps警告。

  /**
  data example:

  currentSelectedMedia = [
    { id: '1', mediaType: '1', name: 'facebook'},
    { id: '2', mediaType: '2', name: 'twitter'}
  ]
  **/

  useEffect(() => {
    setCurrentSelectedMedia(currentSelectedMedia.filter(item => item.mediaType === mediaType))
  }, [mediaType])

如果我将currentSelectedMedia添加到依赖数组中，将导致无限循环。

根据规则警告是正确的，无限循环的原因也是显而易见的。但是我怎么才能逃脱呢？

Answer 1

你会得到react-hooks/exhaustive deps警告或者无限循环，因为你的useEffect钩子会在每次mediaType状态改变时触发；在你的useEffect方法中，你设置了mediaType状态的值；

要解决这个问题，你可以有两个不同的状态，或者只有一个普通的函数来设置mediaType，或者只创建一个变量，当你的状态发生变化时过滤数据。这取决于您如何从其他地方设置mediaType状态。

const filteredData = currentSelectedMedia.filter(item => item.mediaType === mediaType);

使用filteredData呈现数据。

Answer 2

我相信你想要的是得到经过过滤的精选媒体。

但是，在这种情况下使用useEffect可能不是最合适的。您可能希望考虑使用useMemo。

const filteredMedia = useMemo(() => {
    return currentSelectedMedia.filter(item => item.mediaType === mediaType)
}, [currentSelectedMedia, mediaType] )

然后，您可以在渲染中使用filteredMedia。

仅当currentSelectedMedia或mediaType更改时，才会重新筛选该值。

以上内容几乎等同于

 const filteredMedia = currentSelectedMedia.filter(item => item.mediaType === mediaType)

不同的是- useMemo是“记忆的”，所以它不会在每次渲染时重新计算。

小型数组和计算的性能差异很小，当您处理大型列表和复杂计算时，性能会有明显的提升。

Answer 3

useEffect将在挂载时触发，并且每次它的一个依赖项更改时都会触发。如果您将currentSelectedMedia添加到它的依赖项列表中，并且还修改了useEffect中的currentSelectedMedia，则会导致无限循环。

我将简单地使用相同的逻辑来更改mediaType (最有可能是一个[action]Handler函数)和setCurrentSelectedMedia。