小编Dre*_*ese的帖子

我的应用程序是这样的：

盖茨比计划

index.tsx - 应用程序的入口点 - 我调用

<Provider store={store}>
   <HomePage />
</Provider>

HomePage.js 用途mapStateToProps与用途connect(mapStateToProps)(HomePage)

当然，在我的主页中，我使用了多个 React 组件。我可以利用该商店，读取/写入该商店上发生的任何事情HomePage。

在我的主页上，我有指向 的链接ActivityPage。一旦我点击此页面并登陆那里 - 问题就开始了。

ActivityPage 使用多个子组件来完成任务。如何从 ActivityPage 访问读/写？

我无法useDispatch在商店中写入甚至读取。我可以在我的 ReactDev 工具上看到该商店，但在尝试读/写时，我收到 11 个错误，大部分是沿着我需要用以下内容包装组件的思路：<Provider>

我在 Stack Overflow 上阅读了不同的解决方案，这表明我需要拥有mapStateToProps并使用connect需要访问商店的任何组件。

这是行不通的，因为我特别希望从“新页面”访问商店。我需要为我的子页面创建另一家商店吗？请帮助。 :

我正在尝试使用新发布的路由器实现 PrivateRoute 逻辑，但它似乎无法按预期工作。

import { Route, Routes, Navigate } from "react-router-dom";

import LogInPage from "./pages/LogIn";
import DashboardPage from "./pages/Dashboard";

function PrivateRoute({ path, element }) {
  const auth = true;

  return (
    <Route
      path={path}
      element={auth === true ? element : <Navigate replace to="/login" />}
    />
  );
}

function App() {
  return (
    <Routes>
      <Route path="/*" element={<PageNotFound />} />
      <Route path="/" element={<Navigate replace to="/dashboard" />} />
      <Route path="/login" element={<LogInPage />} />
      <PrivateRoute
        path="/dashboard"
        element={<DashboardPage />}
      />
    </Routes>
  );
}

export default App; …

假设我有一个组件：

export const MyComponent = ({largeArray}) => {
    const arrayINeed = largeArray.sort()
}

据我了解，每次重新渲染largeArray.sort()时都会被调用，如果很大，这不会引起一定程度的性能问题吗？MyComponentlargeArray

在这种情况下，像这样记住结果是否更好？：

export const MyComponent = ({largeArray}) => {
    const sortedArray = useMemo(() => largeArray.sort(), [largeArray])
}

我的 React 项目有 2 个菜单，它们都使用 NavLink 来显示它是否处于活动状态。

普通版可以工作，但移动版是用 HeadlessUI Disclosure.Button 构建的...

所以我有：

<Disclosure.Button
  as={NavLink}
  to='/'
  className={({ isActive }) => isActive
    ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
    : "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
  }
>
  My Events
</Disclosure.Button>

而这个 isActive 布尔值不起作用。

我假设我使用的 className 不会影响 NavLink，而只会影响 Button？但我没有任何线索。

问题不在于路由器或其他任何东西，因为顶部的主菜单可以工作：

<NavLink
  to="/"
  className={({ isActive }) => isActive
    ? "border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
    : …

我正在尝试使用自定义挂钩来调用将用于多个组件和上下文的函数。但是，钩子永远不会更新上下文值，它始终是一个空数组，但在上下文中，用作上下文值的状态会被更新，并且在组件中会接收上下文值。这里发生了什么？

在我看来，上下文值没有被传递给钩子，但我不明白为什么。

这是我的代码示例：

语境：

import { createContext, useState, useEffect } from "react";
import useTest from "./useTest";

const TestContext = createContext({
  test: [],
  testContextFn: () => {}
});

export const TestProvider = ({ children }) => {
  const [testState, setTestState] = useState([]);

  const { testFn } = useTest();

  const testHandlerHandler = () => {
    const test = 1;
    setTestState((current) => [...current, test]);
    testFn();
  };

  const contextValue = {
    test: testState,
    testContextFn: testHandlerHandler
  };

  useEffect(() => {
    console.log("state: ", testState); // => …

我有一个待办事项列表，其中任务可以是单个大文本区域（此处称为 dataArea）或这些文本区域的列表。这些文本区域的高度应该随着内容的添加而增加，我是通过在输入时将高度设置为其滚动高度（通过handleInput）来实现的。我想做的是让人们在纯文本区域和文本区域列表之间切换（通过toggleChecklist），使用状态来存储内容。

但是，当通过状态\xe2\x80\x94而不是直接用户输入\xe2\x80\x94设置内容时，无法到达handleInput函数，我必须从不同的函数设置它或手动触发onInput。无论哪种方式，我相信我必须使用 ref (blobRef) 来访问该元素以设置其高度。但是，在切换到清单或从清单切换之后，blobRef 为 null。这是为什么？

这是在完整上下文中[不]发生的地方（我认为只有 Form.js 文件需要查看）： https: //github.com/werdnanoslen/tasks/blob/help/src/组件/Form.js#L85

这是一些代码预览：

  const blobRef = useRef(null)\n\n  ...\n\n  function handleInput(e, i) {\n    const element = e.target\n    if (checklist) {\n      let checklistDataCopy = [...checklistData]\n      checklistDataCopy[i] = { ...checklistDataCopy[i], data: element.value }\n      setChecklistData(checklistDataCopy)\n    } else {\n      setData(element.value)\n    }\n    element.style.height = \'0\'\n    element.style.height = element.scrollHeight + \'px\'\n  }\n\n  function toggleChecklist() {\n    setChecklist((prevChecklist) => !prevChecklist)\n    if (checklist) {\n      const n = String.fromCharCode(13, 10) //newline character\n      setData(checklistData.reduce((p, c) => p.concat(c.data …