渲染比之前渲染时更多的钩子

Question

我有一个带有对象数组的组件，其中我正在根据字符串进行过滤。问题是当我尝试将此过滤器的返回设置为本地状态时，它会抛出错误，我不太理解原因。

import React, { useState, useEffect } from 'react';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'
const ProductsGrid = () => {


const [productsList, setProductsList] = useState([]);
  const { loading, data } = useQuery(GET_PRODUCTS);
  if (loading) return <div><h4>bla bla bla</h4></div>
  const { merchants } = data;
  let filtered = [];
  merchants.map(merchant => {
    merchant.products.map(product => {
      if (product.name.includes('Polo')) {
        filtered.push(product);
      }
    })
  })
  console.log({ filtered });
}

所以，因为我希望这个数组处于我的状态，所以我决定这样做：setProductsList（过滤）; 插入这一行后发生的事情是这样的：

它开始多次渲染。我假设，每次状态改变时，它都会重新渲染组件（如果我错了，请纠正我）。不过，我不知道它为什么要多次这样做。

因此，我想过使用 useEffect 来实现此处的预期行为。

useEffect(() => {
console.log('useeffect', data);
if (data) {
  const { merchants } = data;
  console.log({merchants })
  let filtered = [];
  merchants.map(merchant => {
    merchant.products.map(product => {
      if (product.name.includes('Polo')) {
        filtered.push(product);
        // console.log({ filtered });
      }
    })
  })
  console.log({ filtered });
  setProductsList(filtered);
}

}，[数据]）

所以，我明白这里发生了什么，最后一个错误是关于什么的。我假设我的方法是对的，使用< code>useEffect只运行一次函数。

Answer 1

您的问题是由于＜code＞useffect条件之后，该条件提前返回。

在条件返回语句之后调用钩子是非法的，因为它违反了在每次渲染时始终以完全相同的顺序调用钩子的保证。

js prettyprint-override">const { loading, data } = useQuery(GET_PRODUCTS);
const [productsList, setProductsList] = useState([]);
if (loading)
  return (
    <div>
      <h4>bla bla bla</h4>
    </div>
  );  // <-- Cannot use hooks after this point
useEffect(/* ... */)

若要解决此问题，请将< code>useEffect调用移到条件之前。