使用useEffect和redux存储时出现无限循环

Question

我有一个组件，该组件根据Redux存储中的数组呈现选项卡，并根据用户单击选项卡来更新存储。但是当我单击选项卡时，这会导致无限循环。

function TabsList() {
  const reportNamesStore = useSelector(getStoreTabs);
  const [reportNames, setReportNames] = useState([]);

  const handleClick = (index) => {
            dispatch(tabClicked({ active: index }))
            setReportNames([...reportNamesStore]);
  };

  useEffect(() => {
    setReportNames([...reportNamesStore]);
  }, [reportNamesStore]);

  return (
       ...
      <a onClick={() => handleClick(index)}/>
   )
 
enter code here

我的减速器如下

getTabsReducer(
   state = { active: -1, tabs: [] },
  ...
case TAB_CLICKED:
  return {
    tabs: [...state],
    active: action.payload.active,
  };