小编Dre*_*ese的帖子

如果我用这个

  useEffect(() => {
dispatch(fetchToDos())}, [debouncedToDo, loginInfo.isLogin])

我收到此警告

React Hook useEffect 缺少依赖项：“dispatch”。包含它或删除依赖项数组react-hooks/exhaustive-deps

如果我在依赖项数组中包含“dispatch”，警告就会消失。

像这样：

  useEffect(() => {
dispatch(fetchToDos())}, [dispatch, debouncedToDo, loginInfo.isLogin])

我正在尝试在 Next.js 项目中实现 redux-toolkit，同时又不会失去从外部 API 获取数据的 SSR 选项。我遵循了 next.js GitHub 中的示例，但这样做导致在我的 redux 切片中获取数据时没有 SSR。我想知道如何获取数据并将该数据保存在 Redux 状态中。这就是我写的：这是 store.js 文件

export const store = configureStore({
  reducer: {
    users: usersReducer,
  },
});

_app.js 文件

import { Provider } from 'react-redux';
import { store } from '../app/store';

const MyApp = ({ Component, pageProps }) => {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
};

export default MyApp;

usersSlice.js 文件

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

const initialState = {
  items: null, …

我将应用程序Material-UI从版本 4 更新到版本 5，但 RTL 支持不再起作用。

我查看了文档并按照每个步骤进行操作：

https://mui.com/guides/right-to-left/

实际结果是应用程序仍然是 LTR（您可以查看TextField下面 Codesandbox 链接中的组件）。

预期结果是应用程序应该是 RTL。

尽管如此，RTL 支持仍然不起作用。

此外，我在以下位置创建了一个示例版本Codesandbox：

https://codesandbox.io/s/issue-with-rtl-in-material-ui-v5-jtii6?file=/src/index.js

我将感谢您帮助找出问题所在。

谢谢。

我正在设置 404 页面。它将位于 /404，我将用于<Navigate path='/404' />任何未知的路线。这一切都工作正常，但我还想显示 URL 详细信息，甚至记录坏链接。为此，我需要访问之前的路线详细信息。

有一篇类似的文章，但它讨论的是导航历史记录，而不是显示历史信息。

如何在react-router-dom v6中返回到之前的路由

我尝试了以下各种组合，尝试从 useLocation 获取详细信息并作为状态传递，但它会引发错误：Error: useLocation() may be used only in the context of a <Router> component.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Homepage />} />
    <Route path="/404" element={<NoPageFound />} />
    <Route path="*" element={<Navigate to='/404' state={{ prevRoute: useLocation() }} />} />
  </Routes>
<BrowserRouter>

是否有其他方法可以从内部访问之前的路线详细信息<NoPageFound />以用于显示/记录目的？

我该如何解决这个问题。我只是想创建一个测试来确保该组件呈现，但由于某种原因，即使该组件已经在内部，仍然会出现此问题<Router>。

我在这里读过其他类似的问题，答案都说将组件放入<Router/>，但这对我来说似乎不是问题。请告诉我我错过了什么？

** 我的应用程序.tsx**

import './App.scss';
import { AuthContexProvider } from './Utils/Contexs/AuthContext';
import { Routes, Route } from 'react-router-dom';
import { LogoLarge } from './Components/Logo/Logo';
import { SignInView } from './Views/SignInView';
import { ErrorPage } from './Views/ErrorView';
import { SignUpView } from './Views/SignUpView';
import { SwipeView } from './Views/SwipeView';
import { ResetPasswordView } from './Views/ResetPasswordView';
import { CreateProfileView } from './Views/CreateProfileView';
import { PrivateRoute } from './Utils/PrivateRoute';
import { ProfileView } from './Views/ProfileView';
import { SwipeContexProvider …

我想在我的 React 应用程序中使用 amcharts5 创建图表。

我在我的应用程序组件中导入的组件中实例化 amcharts5 的根元素。我收到以下错误

You cannot have multiple Roots in the same DOM node

这是我的版本：

"react": "^17.0.2"
"@amcharts/amcharts5": "^5.1.1"

这是我的代码：

import { useLayoutEffect } from 'react'
import * as am5 from '@amcharts/amcharts5'

export default function AmCharts5() {
  useLayoutEffect(() => {
    let root = am5.Root.new('chartdiv')

    // root.current = root
    // here is a second Error : Property 'current' does not exist on type 'Root'


    return () => {
      root.dispose()
    }
  }, [])

  return <div id="chartdiv" style={{ width: …

如何使用 React Router v6 获取当前 url 的最后一部分？

例如：

如果当前路径是https://localhost:4200/example/example-details，那么我想像这样检查它

const location = useLocation();

if (location.pathname === '/example-details')) {
  // do some stuff here
}

..但这总是返回完整路径。

它可以与 一起使用location.pathname.includes('/example-details')，但我很好奇是否有一种使用 React 路由器的方法，就像使用 Angular 路由器一样。

我如何在 React Router v6 的上下文中包装 2 个路由？只有这两个应该暴露在该上下文中，并且我无法单独设置上下文，因为上下文运行一些代码（useEffect），如果我这样做，它会在每次切换路由时触发，我希望它在加载两条路由之前而不是之后触发按下它们，而且在我加载 app.js 后，app.js 会加载，而上下文提供程序不会加载，那么当我这两个路由之一时，上下文会触发，而当我在它们之间切换时，它不会触发，这可能吗？谢谢

  return (
    <Layout>
      <Routes>
        <Route path="/*" element={<Navigate replace to='/login'/>} />
        <Route path="/pracels" element={<PracelsPage/>} />
        <Route path="/search" element={<SearchPracelPage/>} />
        <Route path="/login" element={<LoginPage/>} />
      </Routes>
    </Layout>
  );

我想用 1 个上下文提供程序包装 /pracels 和 /search

我正在研究一个简单的服务器端渲染（SSR）场景：只是一个登录页面，其中包含用户名和密码的文本输入。

与 SSR 一样，当客户端首次加载页面时，他们会获得服务器渲染的版本，该版本未经过水化。看起来不错，并且可以单击文本框并输入内容。

希望 JS 能够快速加载，并且在用户在框中输入任何内容之前就发生水合作用，并且一切正常。

但是，如果用户的网络速度很慢并且 JS 需要几秒钟才能加载怎么办？然后会发生以下情况：

1. 用户在框中输入一些字符
2. JS 突然加载，React 控制了输入框，并清除了它，因为初始状态是一个空字符串（！）
3. 用户感到困惑，必须重新输入。

一定有一个最佳实践，对吗？我尝试过一些事情，例如测试 iftypeof window === "undefined"并将输入设置为disabledif so，但没有什么是令人满意的。我认为最好的用户体验是让水合组件拾取已键入的字符，但我也可以禁用编辑，直到水合完成。

FWIW 我正在使用 Material UI，它会带来一些额外的样式问题，但除此之外，我认为这个问题适用于任何 SSR 文本输入场景。