eskimopest's questions

我有 2 个组件。一个导航栏和一个侧边栏/购物车。在导航栏上，我有一个按钮可以打开和关闭侧边栏。我有一个事件可以触发 clickOutside 函数及其工作。问题是，当我在侧边栏处于活动状态时单击购物车项目时，侧边栏会关闭并再次重新打开。

我的App.jsx：

import { useEffect, useState } from "react";
import "./App.css";
import { Navbar } from "./Components/Navbar";
import { ListItem } from "./Components/ListItem";
import { Cart } from "./Components/Cart";

function App() {
  const [list, setList] = useState([]);
  const [cartActive, setCartActive] = useState(false);

  const fetchList = () => {
    fetch(`https://fakestoreapi.com/products`)
      .then((res) => res.json())
      .then((data) => {
        setList(data);
      })
      .catch((error) => {});
  };

  useEffect(() => {
    fetchList();
  }, []);

  return (
    <>
      <Navbar setCartActive={setCartActive} cartActive={cartActive} />
      <Cart cartActive={cartActive} setCartActive={setCartActive} />
      <div className="main">
        <div className="container">
          {list.map((item) => {
            return <ListItem key={item.id} item={item} />;
          })}
        </div>
      </div>
    </>
  );
}

export default App;
 

我的导航栏：

import { useEffect, useState } from "react";
import { FaShoppingBag } from "react-icons/fa";
import { useSelector } from "react-redux";

export const Navbar = ({ setCartActive, cartActive }) => {
  const cart = useSelector((state) => state.cart.cart);
  const [totalItems, setTotalItems] = useState(0);

  const fetchTotalItems = () => {
    setTotalItems(cart.reduce((acc, curr) => acc + curr.amount, 0));
  };

  useEffect(() => {
    fetchTotalItems();
  }, [cart]);

  return (
    <nav>
      <div className="container">
        <div className="brand">
          Redux<span>Store</span>
        </div>
        <div className="icon" onClick={() => setCartActive(!cartActive)}>
          <FaShoppingBag /> ({totalItems})
        </div>
      </div>
    </nav>
  );
};

我的侧边栏/购物车：

import { useSelector } from "react-redux";
import { CartItem } from "./CartItem";
import { useEffect, useRef } from "react";

export const Cart = ({ cartActive, setCartActive }) => {
  const cart = useSelector((state) => state.cart.cart);
  const cartRef = useRef();

  const handleClickOutside = (e) => {
    if (cartActive && cartRef.current && !cartRef.current.contains(e.target)) {
      setCartActive(false);
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  return (
    <div className={`cart ${cartActive ? "active" : ""}`} ref={cartRef}>
      {cart.map((item) => {
        return <CartItem key={item.id} item={item} />;
      })}
    </div>
  );
};

这是可行的，但是当用户在侧边栏打开时单击购物车图标时，侧边栏会关闭并重新打开。这是因为它捕获了 clickOutside 函数。我怎样才能停止导航栏上的 clickoutside 函数？

这是codesandbox的链接

我有 2 个数组类别和通知；

categorias 是这样的：

export const Categorias = [
  {
    id: 1,
    name: "actualidade",
    slug: "actualidade",
  },
...
]

而 noticias 是这样的：

export const Noticias = [
  {
    id: 1,
    titulo: "titulo da primeira notícia",
    slug: "titulo-da-primeira-notícia",
    texto:
      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.",
    img: "https://picsum.photos/id/0/5000/3333",
    cat: "politica",
    destaque: true,
  },
...
]

在主页上我有此代码，每个类别显示 4 条新闻：

{cats.map((item, index) => {
        return (
          <section className={`noticias ${item.name}`} key={index}>
            <div className="container">
              <div className="title">
                <h3>
                  {item.name}
                  <Link to={`/noticias/${item.slug}`}>
                    <p>ver todas</p>
                  </Link>
                </h3>
              </div>
            </div>

            <div className="blocks">
              {[...news]
                .reverse()
                .filter(
                  (noticia) =>
                    noticia.cat === item.slug && noticia.destaque !== true
                )
                .slice(0, 4)
                .map((noticia, idx) => {
                  return <BlockNoticia key={idx} item={noticia} id={idx} />;
                })}
            </div>
          </section>
        );
      })}

我故意留下一些没有新闻的类别，以便在没有新闻时显示一条消息。

除某个类别没有新闻外，此功能运行正常。

我怎样才能显示“此类别中没有新闻”这样的消息？