eskimopest's questions

我正在开发一个应用程序，其中我使用 redux 工具包和 localstorage 来保存主题。

我有这个片段：

import { createSlice } from "@reduxjs/toolkit";

const mode = !localStorage.getItem("theme")
  ? ""
  : JSON.parse(localStorage.getItem("theme")); //the error is on this line

const initialState = {
  mode: mode,
};

const ThemeSlice = createSlice({
  name: "theme",
  initialState,
  reducers: {
    toggleTheme: (state) => {
      state.mode = state.mode === "light" ? "dark" : "light";
    },
  },
});

export const { toggleTheme } = ThemeSlice.actions;
export default ThemeSlice.reducer;

但它给了我一个错误：Argument of type 'string | null' is not assignable to parameter of type 'string'.

我该怎么做才能消除此错误？

我正在学习 react 和 typescript。我正在尝试使用 useReducer 构建一个 todo 应用程序，但遇到了一些错误。不知道它们是否有关联。

我的代码如下

import { useReducer, useState } from "react";
import { Sidebar } from "../components/Sidebar";

interface State {
  todos: [];
}

enum ActionType {
  Add = "ADD",
  Remove = "REMOVE",
}

interface Action {
  type: ActionType;
  payload: {
    id: string;
    title: string;
  };
}

const initialState: State = {
  todos: [],
};

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case ActionType.Add:
      return [
        ...state.todos,
        { id: action.payload.id, title: action.payload.title },
      ];
    case ActionType.Remove:
      
    default:
      return state.todos;
  }
};
export const Todo = () => {
  const [state, dispatch] = useReducer(reducer, initialState);   // first mistake is here
  const [input, setInput] = useState<string>("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // second mistake is here
    dispatch({
      type: ActionType.Add,
      payload: { id: crypto.randomUUID(), title: input },
    });
  };

  return (
    <>
      <Sidebar />
      <div className="main">
        <form onSubmit={(e) => handleSubmit(e)}>
          <input type="text" onChange={(e) => setInput(e.target.value)} />
          <button>add</button>
        </form>
      </div>
    </>
  );
};

第一个错误是： useReducer 说“没有过载匹配此调用……”

第二个是当我调用 dispatch 时它说“预期 0 个参数，但得到 1 个”

提前感谢你的帮助。

我有 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>
        );
      })}

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

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

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