ReactJS

Question

我是 React 的新手。

我的应用、距离和评级中有一些过滤器。

我想知道显示应用到用户的过滤器的数量。

我使用

创建了组件级状态

const [rating, setRating] = useState([])
const [distance, setDistance] = useState(0)
const [filters, setFitlers] = useState([])

在 pageLoad 上发生异步 API 调用。

我尝试通过添加过滤器、距离和评级的依赖项来使用 useEffect()：

useEffect(() => {
  // distance filter is mandatory
  if (!filters.includes('distance')) {
    setFilters([...filters, 'distance'])
  }
  if (rating.length > 0) {
    if (!filters.includes('rating')) {
      setFilters([...filters, 'distance'])
    }
  } else {
    setFilters(filters.filter((f) => f !== 'rating'))
  }
}, [filters, distance, rating])

但是一旦没有选择评级，我就会收到 React 警告：超出最大更新深度。

我如何安全地维护我的过滤器数量？

Answer 1

你是：

添加 distance 两次 ([...filters, 'distance'])。
可能关闭州 filters。
你在 filters.includes("rating") === true 上有一个无限循环，你的逻辑总是选择这条路径并更新状态。

试试这样的：

useEffect(() => {
  if (!filters.includes("distance")) {
    setFilters((filters) => [...filters, "distance"]);
  }
  if (rating.length > 0) {
    if (!filters.includes("rating")) {
      setFilters((filters) => [...filters, "rating"]);
    }
  } else {
    setFilters((filters) => {
      const filtered = filters.filter((f) => f !== "rating");
      return filtered.length === filters.length ? filters : filtered;
    });
  }
}, [filters, distance, rating]);

Answer 2

您将收到错误“超出最大更新深度”，因为在 useEffect 上添加“过滤器”依赖项会导致无限渲染。 useEffect 将运行每当“过滤器”状态发生变化并且在你的 useEffect 中你执行了 setFilters() 并且这导致 useEffect 运行一次又一次。

Answer 3

您得到的错误 Maximum update depth exceeded 是由无限循环/无限 re-renders.

引起的

由于您在 UseEffect 的依赖项中添加了 filters 并在其中设置了带有 setFilters 的过滤器值，因此 useEffect 将执行无限次次。

我真的不明白为什么你在没有选择评级的情况下只收到这个错误..

ReactJS - 使用 useState 挂钩维护数值

ReactJS - Maintaining a numeric value with useState hook

react-hooks

use-state