Question

我对React还是很陌生。

我的应用程序中有一些过滤器，距离和等级。

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

我使用创建了组件级别状态

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

异步API调用发生在pageLoad上。

我尝试通过添加过滤器，距离和等级的依赖项来使用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上添加“过滤器”依赖项将导致无限渲染。只要“过滤器”状态发生变化，并且在执行setFilters（）的useEffect内部，useEffect就会运行，这会导致useEffect一次又一次地运行。

Answer 3

您收到的错误Maximum update depth exceeded是由无限循环/无限重新渲染引起的。

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

我真的不明白为什么您只在没有选择等级的情况下才会收到此错误。

ReactJS-使用useState挂钩维护数值

3 个答案: