react-hooks 相关问题

Hooks是一项新功能，允许开发人员在不编写类的情况下使用状态和其他React功能。

当console.logging它在handleSubmit函数中时，useReducer的值没有更新

我正在使用 useReducer 作为我的登录/注册表单。当我使用记录reducer值时，它只返回默认值，而当我将其记录在useEffect钩子上时，它可以完美地工作。这里...

javascript reactjs typescript next.js react-hooks

回答 1 投票 0

我正在使用react-pdf来渲染Pdf文件，它工作得很好。下面是相同的代码：我正在使用react-pdf来渲染Pdf文件，它工作得很好。下面是相同的代码： <Document inputRef={documentRef} file={pdfUrl} error={() => {}} onLoadSuccess={(params) => { console.log('paramsparams => ', params); }} > <Page renderTextLayer={true} renderAnnotationLayer={true} customTextRenderer={false} pageNumber={1} renderForms={true} /> </Document> <button onCLick={()=>// access updated pdf buffer }>Save</button> 这是与表单字段一起渲染文本层。由于 pdf 有表单字段，我希望我的用户填写它，并且我应该能够存储填充的 pdf 的副本。当前用户可以填写详细信息，但如何访问更新的 pdf 缓冲区对象，该对象应包含带有填充表单的 pdf，以便我可以在服务器上创建和存储 pdf？ GPT4：要使用react-pdf保存更新后的带有填写表单字段的PDF，您需要使用能够编辑PDF的库来补充它，例如pdf-lib。这是一个简化的方法：捕获表单输入：在应用程序逻辑中处理表单输入并将其存储在状态中。修改PDF：用户完成表单后，使用pdf-lib打开原始PDF，使用新的表单数据对其进行修改，并将更新后的PDF保存在内存中。保存或上传 PDF：将更新的 PDF 转换为适合存储或传输的格式（如 Blob），并允许用户下载或将其发送到您的服务器。此方法涉及单独处理表单逻辑，然后在保存或上传更新版本之前将更改应用到 PDF。

javascript reactjs react-hooks react-pdf react-pdf-viewer

回答 1 投票 0

如何在使用 React Material ui 对话框时防止重新渲染

我正在一个项目中使用react-material-ui库中的模态，我注意到在尝试打开/关闭对话框组件时出现了副作用。试试这个代码（代码沙箱）：从...导入 { useState }

reactjs performance react-hooks material-ui

回答 1 投票 0

在哪里从 AWS Cognito 托管 UI 重定向发出 OAuth 2.0 代码端点请求以获取访问令牌

我有一个 /signup 组件，其中只有一个链接到我的 congito 托管 UI 的按钮。注册和登录的作用是将用户添加到用户池并确认电子邮件。我的重定向网址是 http...

reactjs amazon-web-services react-hooks oauth-2.0 amazon-cognito

回答 1 投票 0

为什么 useState 不起作用以及如何修复它？

useState 不起作用。虽然我在另一个组件中做了同样的事情，但一切都很好。第 7:31 行：在函数“categories”中调用 React Hook“useState”，该函数既不是

javascript reactjs react-hooks frontend

回答 1 投票 0

在reducer func中获取api数据

按照第 23 行的承诺获得输出我正在尝试使用 usereducer 来获取数据，其中的调度程序函数在 useeffect hook 内被调用。但是我得到的输出是承诺要做什么？让

javascript reactjs react-native react-hooks

回答 1 投票 0

React 的行为方式很奇怪

我正在尝试制作这款记忆卡游戏。它工作得很好，但底部的尝试却以一种奇怪的方式反作用。事实上，它有时会增加 1，有时会增加 2。为什么会这样...

javascript reactjs react-hooks

回答 1 投票 0

组件单独渲染时的上下文共享

据我了解，我们所有的 React 应用程序的组件都使用相同的共享上下文 ChannelProvider 进行包装。它们都源于据我了解，我们所有的 React 应用程序组件都包含相同的共享上下文ChannelProvider。它们都源于 <div id="root></div>...除了一个名为 Sidebar 的组件。 Sidebar 也被 ChannelProvider 包裹，但它似乎使用了一个单独的上下文..由于（我假设）是不同 React DOM 的一部分。您将在 LibraryService 的代码中看到原因。对于我来说，能够在 channelId 和 ChannelProvider 中访问相同的 Map 状态（如我的 Sidebar 中所定义）非常重要。有什么方法可以让我实现这一目标吗？我正在研究门户网站，但不可否认我仍然非常不确定。 index.html： <!DOCTYPE html> <html lang="en"> <head> <title>My App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html> index.tsx： import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals'; console.log('index initialise app'); const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render( <App /> ); reportWebVitals(); channel.context.tsx： import React, { createContext, useState, useContext, ReactNode } from 'react'; interface ChannelProviderProps { children: ReactNode; } const ChannelContext = createContext<{ channelId: string; setChannelId: React.Dispatch<React.SetStateAction<string>> } | null>(null); export const ChannelProvider = ({ children }: ChannelProviderProps) => { const [channelId, setChannelId] = useState<string>('Initial'); return <ChannelContext.Provider value={{ channelId, setChannelId }}>{children}</ChannelContext.Provider>; }; export function useChannel() { const context = useContext(ChannelContext); if (!context) { const errorMessage = `Existing context not found.\n useChannel must be used within a ChannelProvider`; throw new Error(errorMessage); } return context; }; app.tsx： import './App.css'; import { ChannelProvider } from './contexts/channel.context'; import MapRoutes from './routes/MapRoutes'; function App() { console.log('Dashboard App'); return ( <div className="App"> <ChannelProvider> <MapRoutes /> </ChannelProvider> </div> ); } export default App; maproutes.tsx： import { Navigate, BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Map from '../components/Map/Map'; import { tConfig, hConfig } from '../config/configuration'; function MapRoutes() { return ( <Router> <Routes> <Route path="/" element={<Navigate to="/t" />} /> <Route path="/t" element={<Map config={tConfig} />} /> <Route path="/h" element={<Map config={hConfig} />} /> </Routes> </Router> ); } export default MapRoutes; map.tsx（这是侧边栏面板的 div 所在的位置）： interface MapProps { config: Configuration; } function Map(props: MapProps) { return ( <div className="map"> <nav id="menu"></nav> <div id="sidebar-panel"></div> <div className="map-stats-bar"> <p> <b>Longitude</b> <span>{longitude.toFixed(4)}</span>{' '} </p> <p> <b>Latitude</b> <span>{latitude.toFixed(4)}</span> </p> <p> <b>Zoom</b> <span>{zoom}</span>{' '} </p> </div> <div id="version-watermark"></div> <div ref={mapContainer} className="map-container" /> </div> ); } export default Map; LibraryService.tsx： public displaySideBarPanel( content: CustomConfig, addSelectedLayer: boolean, statusList?: Map<string, Status> ) { const sidebarPanel = document.getElementById('sidebar-panel'); if (!this.map.current) return; const selectedLayer: SelectedLayer = { selectedLayerId: this.sourceId, selectedImage: this.selectedIcon, map: this.map.current }; const map: MutableRefObject<mapboxgl.Map | null> = this.map; if (sidebarPanel) { let sidebar; if (addSelectedLayer) { sidebar = ( <ChannelProvider> <SideBar config={content} selectedLayer={selectedLayer} statusList={statusList} map={map} isSidebarVisible={true} showMoreSettings={false} /> </ChannelProvider> ); } const rootElement = createRoot(sidebarPanel); rootElement.render(sidebar); } } 我知道createRoot等是这里的罪魁祸首。但是，如果某种跨上下文共享是可能的（门户网站是否相关，或者我是否浪费时间来研究它？）那就真的很好了。如果它们都嵌套在一个上下文提供程序中，则 Sidebar 组件的上下文将被另一提供程序覆盖。如果它们都是同一上下文提供程序的子级，并且它们打算位于共享上下文中，请删除该包装器。仔细一看，好像就是这个情况。您可能需要修改侧边栏组件，这样如果它是在初始渲染之外创建的，它就不会在第一次渲染时抛出错误（我不确定这是否会成为问题，当我们得到时，让我们跨过那座桥到它），但您当前正在使用内部上下文覆盖主上下文。

reactjs react-hooks

回答 1 投票 0

React Native Jest 测试超时问题

我的测试文件；从'@testing-library/react-hooks'导入{renderHook，act}；从 '../useInternetConnectivity' 导入 useInternetConnectivity；从'@react-native-community/netinfo导入NetInfo...

react-native testing react-hooks jestjs babel-jest

回答 1 投票 0

未处理的拒绝（TypeError）：无法读取未定义的属性“amount”

使用 React 制作电子商务应用程序。这是一个“handleSubmit”函数，每次我尝试结帐时都会返回错误。我已导入“db”并声明“

javascript reactjs react-native react-hooks stripe-payments

回答 3 投票 0

React - 具有上下文提供者的依赖数组

假设我有这样的东西：从 'react' 导入 React, { createContext, useState, useContext, ReactNode }; 接口 ChannelProviderProps { 孩子们：ReactNode； } 常量 ChannelContext =

reactjs react-hooks

回答 1 投票 0

js 代码在使用 tailwind 进行 React 时不起作用

我正在尝试使用useState制作一个toogle侧边栏，但是在className内部我无法同时实现js代码和tailwind，我只能添加js代码或我的tailwind代码，正如你在我的代码中看到的那样...