如何在 Redux Saga 中使用 React Hook？
我正在为我的应用程序设置语言。但我有一个问题。 我使用 React.useContext() 来设置语言。但是当我在 saga 的 toast 中修复它时，它会记录： [错误：无效的挂钩调用。 Hooks 只能在 ins 中调用...
这是我的代码： 商店.js 从 'redux' 导入 {createStore, applyMiddleware, compose}； 从“不可变”导入{fromJS}； 从“react-router-redux”导入{routerMiddleware}； 导入createSagaMidd...
使用包装器时从非函数组件调用 React-Redux 调度函数
我有一个 React-Redux 存储，它包装在 next-redux-wrapper 中。我想在 React 组件之外调度一个函数，但由于包装器的原因我无法这样做。有办法导入吗
使用包装器时从非功能组件调用 React-Redux Dispatch 函数
我确实有一个react redux store，它包装在next-redux-wrapper中。我想在 React 组件之外调度一个函数，但由于包装器的原因我无法这样做。有没有办法让我...
当 React hook 依赖于来自 hook 的函数时，我应该先记住它吗？
我是一名经验丰富的程序员（10 年以上），但对 React 很陌生（< 2 years). I picked up React in a very "operational" way (i.e. being happy when things work without very deep understanding...
如何在 RTL 测试中使用 React Redux useDispatch 钩子？
我想在使用 redux 调度后测试 React 组件。我正在使用“test-utils.ts”文件中的自定义渲染函数： 从 'react' 导入 { ReactElement } 导入{渲染，渲染O...
React-Redux useSelector typescript type for state
我正在使用 React-Redux 中的 useSelector(state => state.SLICE_NAME) 挂钩，但是我在定义状态参数时遇到了困难。它默认设置为未知，因此当我尝试时会收到错误...
useForm 和react-hook-form 在我与NextJs 一起使用时出现问题
我正在 NextJs 中编码，我需要使用“useForm”，但它不断给出错误......“无法解析“react-hook-form”。”请帮忙。 从“反应”导入反应； 导入{使用...
我正在使用react和redux从API调用中获取数据，现在我创建了一个新变量并为其分配了相同的数据。在代码中，我将操作这个名为
`我的 React 应用程序运行良好，但升级到 React 18、mui v5 和 redux v5 后，它没有渲染任何内容。 在终端中，我得到： webpack 编译成功 但在 chrome 控制台中...
努力为使用 redux/sagas 的文件编写一些单元测试。 app.tsx 文件看起来像这样 从 'react' 导入 React, { StrictMode } 从'react-dom'导入ReactDOM 导入 { Provider } f...
即使使用了异步，我也无法更新useEffect中的数据。 注意：我不想在 useEffect 中添加数据作为依赖项，因为我只想获取一次数据 从“react&...
我正在使用 React-Hook-Form 实现动态表单的 Yup 验证。验证要求取决于 contentType 的值。如果 contentType 未定义或“博客文章”...
./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js 中的警告 1343:21-28 “在‘redux’中找不到导出‘compose’ @ ./node_modules/redux-saga/dist/redux-saga-core-npm-proxy.esm.js ...
使用 Redux 和 Typescript，如何正确键入“mapStateToProps”函数以仅允许通过状态传递 3 个参数中的 2 个？
我正在将 React 18 与 Redux 8 和 Typescript 结合使用。我想创建一个组件，允许调用者传入其中一个参数，但其他两个参数是从状态派生的。所以我创建了
如何使用 yup 不允许在 React hook 中使用特殊字符和空格
代码如下： { 标签：“名称”， 名称：“名称”， 占位符：'名称'， 类型：“文本”， 规则： yup.string() .required('姓名为必填项...
Typescript 无法与 tsconfig.json 一起使用
在项目中使用 tsconfig 运行 tsc --watch 时，出现以下错误。 它需要 Node js 中的 React 和 Redux 类型。 错误 TS2688：找不到“abstract-leveldow...”的类型定义文件...
使用 WebSocket 和 React 构建通知面板时的推荐方法
我正在使用 websocket 和 React 构建一个通知面板。我应该使用 redux 工具包还是 useContext 来管理 Websocket 的集中位置？或者还有其他建议的方法吗...
是否应该将 setter 函数传递到 React hook 的依赖数组中？
最近我在同事的 React 代码中看到了一些将 setter 函数传递到钩子依赖数组中的示例，这对我来说看起来不太正确。例如： const MyComponent = () => { 反对...
我正在创建一个身份验证表单，并且正在引用有关如何使用 yup 验证我的输入的react-hook-form 文档。据我所知，一切都与实施提供的几乎相同...
如何在react-hook-form中将数值注册为嵌套属性？
我有一个名为 Totals 的属性，它应该包含多个嵌套对象作为属性。 这是我想要的表单结构： { 总计：{ 0：{ 值：0， }, }, }; 然而...
如何在react-hook-form中将数字值注册为嵌套属性
我有一个名为 Totals 的属性，它应该包含多个嵌套对象作为属性。 这是我想要的表单结构： { 总计：{ 0：{ 值：0， }, }, }; 然而...
如何在next-cloudinary和react-hook-form中上传和存储多个图像而不是一张图像
k我有 shadcn/ui 表单组件，如下所示 “使用客户端”； 从“反应”导入{片段}； 从“下一页”导入类型 { NextPage } ； 从“n...
我正在尝试这样做，以便当我单击按钮时，我可以获得一个 html 字符串。 一般来说，这个富文本编辑器会在React-Hook-Form内部，当提交表单时，它会保存
完整错误： 并非所有成分都是 'T | 类型((value: SetStateAction) => void)' 是可调用的。 “T”类型没有呼叫签名。 概括： 我正在尝试创建一个 useStateIfMounted c...
此悬念边界在完成水合之前收到了更新。 React Native、Expo 路由器、Redux、Supabase
在 Expo 上启动开发服务器，在 localhost:8081 上的浏览器上打开，期望应用程序呈现，但出现错误： 这个悬念边界在完成水合之前收到了更新。这...
为什么表单属性不能像 html 按钮字段那样在 MUI 按钮上工作？
我需要使用带有zod验证的react hook表单提交表单。但在我的情况下，提交按钮位于表单标记之外。所以我使用了id形式的方法。 （请调整任何其他方法...
react-hook-form useForm 每次在 Nextjs 页面路由上执行
嗨，我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。 然而，似乎每次都会执行useForm，并且defaultValues是在页面路由中设置的（点击 嗨，我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。 不过，好像每次都会执行useForm，并且在页面路由时设置defaultValues（点击<Link to=XX>）。 如何跨多个页面保存表单数据？ 请帮助我。 这是我的代码。 _app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ); FormProvider.tsx export const FormProvider = ({ children, }: { children: React.ReactNode; }) => { const defaultValues: MyForm = { name: '', description: '' }; const form = useForm({ defaultValues, resolver: zodResolver(MyFormSchema), }); const onSubmit = () => console.log("something to do"); return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}>{children}</form> </Form> ); }; 您正在寻找的是跨多个页面维护的某种全局状态。对于这个例子，我将使用 React 的上下文 API，如果这不适合您的用例，您可以找到一些其他状态管理库。 首先，您需要创建一个全局上下文，并在表单提供程序中包含一个全局状态 // FormProvider.tsx import { createContext, useContext, useState } from 'react'; const FormContext = createContext(); // Exported to be used in other components export const useFormContext = () => useContext(FormContext); export const FormProvider = ({ children }) => { const [formData, setFormData] = useState({}); return ( <FormContext.Provider value={{ formData, setFormData }}> {children} </FormContext.Provider> ); }; 现在您需要用 FormProvider 包装您的应用程序 // You are already doing this part //_app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ) 现在你可以像这样使用它了。请记住，您将更新表单的全局状态，该状态将在您的所有页面上发生变化。 // In your form component import { useForm } from 'react-hook-form'; import { useFormContext } from '../path/to/formContext'; const MyFormComponent = () => { const { formData, setFormData } = useFormContext(); const { register, handleSubmit } = useForm({ defaultValues: formData, resolver: zodResolver(MyFormSchema), }); const onSubmit = (data) => { setFormData(data); // Handle form submission }; return ( <form onSubmit={handleSubmit(onSubmit)}> {/* Form fields */} </form> ); }; 您可以从其他页面访问数据的示例 // In another page or component import { useFormContext } from '../path/to/formContext'; const AnotherPage = () => { const { formData } = useFormContext(); // Use formData as needed };
redux/reducer/cartReducer.ts 从“@reduxjs/toolkit”导入{createSlice，PayloadAction}； 从“../../types/reducer-types”导入{ CartReducerInitialState }； 导入 { 购物车项目，
为什么 Context API 在高频更新方面比 Redux 差？
我看到很多文章说Redux比高频更新在性能上比Context API更好，但没有具体说明原因。 是什么让人们说 Redux 比 Context API 更好......
如何使用 redux tollkit 修复 Next 14 中的错误“请确保组件包裹在 <Provider> 中”？
我很难让 Next.js 14 与 Redux Provider 一起使用。我按照 Redux 官方文档上的所有说明进行操作，但我不断收到此错误： 错误：找不到反应-...
我正在尝试 redux 工具包，目前有以下切片和突变： 导出 const apiSlice = createApi({ 减速器路径：“api”， 基本查询： fetchBaseQuery({ 基本网址：“
我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 导出类型 PageWithLayout = NextPage & { withLayout？：（页面：ReactElement）=> 我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 export type PageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { withLayout?: (page: ReactElement) => ReactNode; }; 这是我的使用方法： export const Interactions: PageWithLayout = () => { const [ getInteractions, { data: interactionData, fetchMore, variables, loading: isInteractionsLoading, error: isInteractionsError, }, ] = useGetInteractionsLazyQuery({ notifyOnNetworkStatusChange: true, fetchPolicy: "network-only", ssr: false, }); return ( <> <Box height={"100vh"}> </Box> </> ); }; Interactions.withLayout = (page: ReactElement) => { // how do I pass isInteractionsLoading as a prop to this component return <Layout>{page}</Layout>; }; export default Interactions; 我想要实现的是将 isInteractionsLoaded 和 isInteractionsError 作为属性传递给我的布局组件，以便我可以渲染这些状态。有没有一种方法可以实现此目的，而无需将布局组件移动到页面组件内？ 创建一个包装组件的 React Context 提供程序可能是您使用的解决方案，如果您不想使用任何其他包或不想使用 redux 等更强大的工具，则可以使用。 但是在这里使用有点尴尬，具体取决于包含交互的组件树是什么样子。否则可以根据您的需要使用 _app 入口点。 示例上下文和用法 import React from 'react'; export const InteractionContext = React.createContext({ isInteractionsLoading: false, isInteractionsError: null, }); // parent component or _app if necessary const ProviderComponent = () => { return ( <InteractionContext.Provider value={{ isInteractionsLoading, isInteractionsError }}> <Interactions /> </InteractionContext.Provider> ); }; const Layout = ({ children }) => { const { isInteractionsLoading, isInteractionsError } = useContext(InteractionContext); // Now you can use isInteractionsLoading and isInteractionsError here // ... return <div>{children}</div>; };
如果 markdown frontmatter 中的值（对于博客文章）键：值对是特定字符串，则运行 git hook
我有一个 git hook 预提交，如果文件在我的 AstroPaper 博客中被修改，它会更新 modDatetime。 # 修改文件，更新modDatetime git diff --cached --name-status | git diff --cached --name-status | git diff --cached --name-status | egrep -i &q...
在store中action的payload中，我使用File类型存储下载的文件，然后该文件将在saga中通过验证 const form = new FormData(); if (私钥 &&
我是 k8s 和 helm 的新手。我正在部署一个名为 zeebe 的开源分布式软件，它为 k8s 部署提供 helm 图表。我发现即使在执行 helm uninstall comm之后...
我正在开发一个使用 Angular 15 的 Excel 插件，在 Angular 应用程序中，我刚刚添加了 @ngrx/store。我也将开发工具添加到了模块中。我注意到 Excel 使用 Edge 来运行该加载项。
如何在 Git-Bash 终端中读取用户输入并传递给 Python 脚本
在开始之前我只是想告诉大家我是Python的初学者:) 我正在通过 git bash 运行 python 脚本，同时提交代码更改（使用 git hook[commit-message]），我想阅读...
新闻： 在上面的答案之后，我可以再改变一点，但我仍然无法改变我需要的一切。现在最大的问题是： 如何删除操作（@hooked）的内容并将其放入新的hook中...
我正在尝试在管理屏幕中的用户中显示 ACF 字段，并且我能够实现这一点。现在我想在正常的 WordPress 用户搜索中通过这个 ACF 字段搜索用户。有没有 Hook / 代码片段...
如果第一个钩子中的状态发生变化，第二个钩子中的useEffect是否会运行？
我有一个总体概念，我想知道这是否是一个好方法以及是否有效。假设我有两个钩子。 Hook #1 是 useClient，它有一个名为 range 的状态。我揭露这个...
redux-saga 取消效果在取消时触发错误“已在运行”。或者如何从控制台删除此错误？
几周以来，我一直在尝试理解为什么当我尝试在我的根传奇中运行取消效果时，我的产量取消会抛出错误： 导出函数* loginData() { const 观察者=yield fork(
从“react”导入React； 从“react-input-mask”导入InputMask； 从“./inputMask.module.scss”导入样式； 从“反应...
对于使用react- Three-Fiber制作的项目，我导入了以下库： 从 '三' 导入 * 作为三； 从“react”导入 React, { Suspense, useState }; 导入 { 画布，useLoader }
为什么我导入 React 时服务器返回 MIME 类型为“text/html”？
这是我的js： 从'./node_modules/react'导入React； 从'./node_modules/react-dom'导入ReactDOM； 让 thePage = React.createElement( '主要的'， 无效的， '哈哈' ）； ReactDOM.render(thePage,
尽管已安装，但找不到模块“@tanstack/react-table”
我正在开发一个 TypeScript React 项目，我正在尝试从 columns.tsx 文件中的 @tanstack/react-table 导入 ColumnDef。 从“@tanstack/react-table”导入{ColumnDef}； 出口...
create-react-app的内容没有推送到github
我将 Go 和 React 代码推送到了 github。 Go代码已成功提交，但React代码未成功提交。 React 内容是由 create-react-app 创建的。 文章 ├ 应用程序接口 │ └ main.go └ 客户 └ 反应
当我尝试创建一个新的 React 应用程序时，我收到以下错误消息， 安装软件包。这可能需要几分钟。安装中 React、react-dom 和带有 cra-temp 的 React-scripts...
react-testing-library：无法关闭 MUI Select 的下拉菜单
我有一个 SelectExample.js 从“react”导入 React, { useState }; 从“@mui/material”导入{InputLabel、MenuItem、FormControl、Select、Typography }；> 导出默认fu...
在React版本18中使用react-facebook-login
我希望将react-facebook-login库与React版本18一起使用，但我无法安装该包。 npm 在控制台上抛出错误？ 该库是否支持 Reac 18 版本...