小编Dre*_*ese的帖子

我完全意识到将不可序列化值存储到 Redux 状态的缺点。就像Redux 文档所说：

如果您对持久性和时间旅行调试等可能无法按预期工作的事情感到满意，那么完全欢迎您将不可序列化的项目放入 Redux 存储中。

所以，我只是制作原型来尝试一些想法。我将来可能会重构代码以从状态中消除这些函数对象，但目前这些警告只是淹没我的控制台，掩盖了我可能真正关心的其他消息。

是否有一些开关可以打开/关闭这些警告？

只是为了练习而制作一个简单的待办事项列表，我希望能够单击列表中的某个项目将其删除。我认为我已经非常接近了，但无法弄清楚如何从单击的 li 中获取某种数据以将其与我的数组进行比较。

应用程序.js

import { useState } from "react";
import "./App.css";
import Newtodo from "./NewTodo/NewTodo";
import TodoList from "./TodoList/TodoList";

let INITIAL_TODOS = [
  { id: "e1", title: "Set up meeting", date: new Date(2021, 0, 14), index: 0 },
  {
    id: "e2",
    title: "Doctor appointment",
    date: new Date(2021, 2, 14),
    index: 1,
  },
  { id: "e3", title: "Work on project", date: new Date(2021, 1, 22), index: 2 },
  { id: "e4", title: "Update resume", date: new Date(2021, 6, 14), index: …

我的项目没有出现任何错误，它只是不渲染任何内容。我错过了什么吗？

在 App.js 中，我使用 render props 进行数据传输。

import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Auth from "./views/Auth";
function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route
            path="/login"
            render={props => <Auth {...props} authRoute="login" />}
          />
          <Route
            path="/register"
            render={props => <Auth {...props} authRoute="register" />}
          />
        </Routes>
      </Router>
    </div>
  );
}
export default App;

我在 Auth.js 上获取它，然后检查 props 的值。

import React from "react";
import LoginForm from "../components/auth/LoginForm";
import RegisterForm from "../components/auth/RegisterForm";
const Auth = ({ authRoute …

在 React Router 5 中，我可以使用 a<redirect path='' />但已在 React Router 6 中删除。我认为它已被替换为<Navigate>，但这会引发此用例的安全错误。

"/"在路径名称之前有什么区别吗？如果在一种情况下我在"/"从第 1 页导航到第 2 页时使用，我是否应该得到不同的结果：

navigate({
  pathname: 'page2',
  search: `?${createSearchParams({ email: username })}`,
});

而在另一个：

navigate({
  pathname: '/page2',
  search: `?${createSearchParams({ email: username })}`,
});

这两种情况下的新路径名是什么？

我有以下代码片段，我收到两个警告：

警告：无法对已卸载的组件执行 React 状态更新。这是一个空操作，但它表明应用程序中存在内存泄漏。要修复此问题，请取消 useEffect 清理函数中的所有订阅和异步任务。

unmountComponentAtNode()：您尝试卸载的节点是由 React 的另一个副本渲染的。

    import React, { useState, useEffect } from "react";
    import GravatarList from "./GravatarList";
    import Header from "./Header";
    import { calculateNumberOfImages } from "./utils";
    
    const App = () => {
      const handle = () => {
        setState({ images: calculateNumberOfImages() });
      }
    
    
      useEffect(() => {
          return () => {
    
            window.removeEventListener('resize', () => handle())
            window.removeEventListener('scroll', () => handle())
          }
       }, [])
    
    
      const [state, setState] = useState(() => {
        
        window.addEventListener("scroll", () => handle());
        window.addEventListener("resize", () => …

我想在里面放一个 div<Routes> 并在里面渲染一个<Topbar />和<Sidebar />组件<Routes>而不<Route>为它们添加标签。

我的代码如下：-

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="login" element={<Login />} />
        <Topbar />
        <div className="container">
          <Sidebar />
          <Route path="/" element={<Home />} />
          <Route path="users" element={<UserList />} />
        </div>
      </Routes>
    </Router>
  );
};

我想对所有路线实施<Topbar />和。<Sidebar />但登录页面例外（Topbar并且Sidebar不应显示在登录页面上）。Topbar这就是为什么我将登录路由放在和的顶部Sidebar。

控制台显示错误为：

未捕获错误：[Topbar] 不是组件<Route>。的所有子组件<Routes>必须是<Route>或<React.Fragment>

如何实现这个功能呢？

我在 Reactjs 上创建了一个网站，并使用“react-router-dom v6”链接了各个页面。每当我从一个页面转换到另一个页面时，第二页总是加载到当前位置而不是顶部。我已经尝试了很多教程和解决方案，但它们在react-router-dom v5之前都有效。

我正在尝试将可选查询参数添加到路径末尾，因此 URL 将如下所示："/user/1/cars?makeYear=2020"或"/user/1/cars"。相关Route定义如下。我无法找到有关如何将可选查询参数添加到现有路径的指南。例如，以下内容不起作用：

<Route path="user" element={<UserScreen />}>
  <Route path=":id/makeYear?" element={<User/>} />
</Route>

在这里，我认为这<Route path=":id/makeYear?" element={<User/>} />将标记makeYear为可选参数，但不，不起作用。

然后我想我可以直接在组件中访问查询参数，因此假设 URL 是，我可以通过提供的 api"/user/1/cars?makeYear=2020"获取 URL 。但是，查询参数也不起作用，因为查询参数会立即从 URL 中删除（我猜是通过）。useLocationreact-router-domreact-router

我正在使用react-router-dom（6.2.2）。

我试图在执行惰性查询时发出使用来自另一个组件的缓存数据的请求。父组件（不是直接父组件，所以我不想通过 props 深入挖掘大型数据集）通过 RTK 进行惰性查询，如下所示：

const [getDocuments, { data: contractDocuments, isLoading, isFetching }] = useLazyGetContractDocumentsQuery();


// inside a fetch function
  getDocuments({
    prop1,
    prop2,
    prop3,
  });

然后子组件也做同样的事情

getDocuments({
  prop1,
  prop2,
  prop3,
}).unwrap().then(documents=>{
  console.log(documents);         
});

我已经验证了 props 是相同的，返回的数据是相同的，但在这两种情况下，每次在任一组件中调用它时，它都会访问 API 端点来获取数据。它永远不会从缓存中获取它。

文档似乎说惰性查询与常规 useQuery 不同，因为您选择何时调用。请参阅不同钩子的功能比较。但我无法与它们一起使用缓存。我是否误解了文档，错过了缓存规则的一些例外，或者有可能在另一个地方我以某种方式禁用了缓存？

顺便说一句，查询如下所示：

    getContractDocuments: builder.query<
      ContractDocument[],
      {
        prop1: string;
        prop2: string | null;
        prop3: string;
      }
    >({
      query: body => ({
        url: '/GetDocuments',
        body,
        method: 'POST',
      }),
      transformResponse: (response: ContractDocument[]) => {
        return response.map(d => ({
          ...d,
          showIconViewFileInNewWindows: extensions.has(`${d.type}`), …