reactjs 相关问题

在 Storybook 文件中使用 useSearchParams 时出现“TypeError：无法读取 null 的属性（读取 'get'）”

我在组件中有以下 Next.js 代码： 从 'next/navigation' 导入 { useSearchParams }； const searchParams = useSearchParams(); const currentPage = parseInt(searchParams.get('page') |...

将文件添加到 Info.plist WebView React Native 中的 LSApplicationQueriesSchemes

我正在构建的应用程序中实现一个支付平台，因此付款表单显示在 WebView 上现在表单加载正常，但是当我更改类似内容时，我从

MUI X 数据网格非截断列宽

如果单元格数据的内容溢出列宽，MUI X 数据网格默认会截断单元格数据。有没有办法防止这种情况，使列宽与标题的最长文本内容相匹配...

打字稿问题和减速器状态不会增加点击时的使用。类型“UserContextType | ”上不存在属性“状态和调度”空'

我对带有反应的打字稿很陌生，尝试了很多东西但不起作用。状态不起作用并出现打字稿错误属性“状态和调度”在类型“UserContextType |”上不存在...

当我从 Typescript 中的 createEntityAdapter 获取选择器时出现错误

在开发一个简单的宠物项目时，我遇到了一个错误，但不知道如何修复它。 我是 Typescript 的新手，从消息错误判断错误是在 TS 中。 错误消息出现在...之后

React 导致不必要的重新渲染

我正在创建一个聊天应用程序，在尝试实现链接预览时遇到一些问题（当您发送链接时，我想从网址加载标题和图像）。从下面的代码你可以看到...

对象可能为“null”：TypeScript、React useRef 和 Formik innerRef

在我使用 Formik 的 React/TypeScript 应用程序中，我收到错误 对象可能为“空”。 TS2531 125 | 125 > 126 | 在我使用 Formik 的 React/TypeScript 应用程序中，我收到错误 Object is possibly 'null'. TS2531 125 | <Modal.Footer> > 126 | <Button variant="primary" type="submit" form="nicknameForm" disabled={!(formRef.current.isValid && formRef.current.dirty)}>Apply</Button> | ^ 127 | </Modal.Footer> 128 | </Modal> 129 | ) 尝试将 formRef.current.isValid 更改为 formRef!.current.isValid 并将 formRef.current.dirty 更改为 formRef!.current.dirty，但错误仍然存在。 为什么会这样，我们该如何修复这个错误？谢谢！ import React, { useState, useEffect, useRef } from 'react'; import { Button, Modal, Form } from 'react-bootstrap'; import { Formik } from 'formik'; interface IModal { show: boolean; handleClose: () => void; } export function NicknameModal({show, handleClose}: IModal) { const formRef = useRef(null); return ( <Modal show={show} onHide={handleClose}> <Modal.Header closeButton> <Modal.Title>My Title</Modal.Title> </Modal.Header> <Modal.Body> <Formik initialValues={{ nickname: '', }} innerRef={formRef} onSubmit={( values, { setSubmitting } ) => { setSubmitting(true); handleClose(); setSubmitting(false); }} > {({values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue }) => ( <Form id="nicknameForm" onSubmit={handleSubmit}> <Form.Group controlId="formNickname"> <Form.Label>Nickname</Form.Label> <Form.Control type="text" name="nickname" onChange={handleChange} onBlur={handleBlur} value={values.nickname} /> </Form.Group> </Form> )} </Formik> </Modal.Body> <Modal.Footer> <Button variant="primary" type="submit" disabled={!(formRef.current.isValid && formRef.current.dirty)} form="nicknameForm">Apply</Button> </Modal.Footer> </Modal> ) } 更新： 如果将 const formRef = useRef(null); 更改为 const formRef = useRef();，我们现在会遇到不同的错误： Type 'MutableRefObject<undefined>' is not assignable to type '((instance: FormikProps<{ nickname: string; }> | null) => void) & MutableRefObject<undefined>'. Type 'MutableRefObject<undefined>' is not assignable to type '(instance: FormikProps<{ nickname: string; }> | null) => void'. Type 'MutableRefObject<undefined>' provides no match for the signature '(instance: FormikProps<{ nickname: string; }> | null): void'. TS2322 71 | nickName: '', 72 | }} > 73 | innerRef={formRef} | ^ 74 | onSubmit={( 75 | values: Values, 76 | { setSubmitting }: FormikHelpers<Values> 您需要设置 useRef 的类型，其中 FormValues 是您的表单值 type FormValues = {}; useRef<FormikProps<FormValues>>(null); https://github.com/formium/formik/issues/2600#issuecomment-693479057 尝试： import { FormikProps } from "formik"; const formRef = useRef<FormikProps<any>>(null); 首先，您需要为Formik初始值定义一个类型： interface HelpFormInitialValues { destination_city: string; cell_phone: string; } const initialValues: FormnameInitialValues = { cell_phone: "", destination_city: "", }; 然后为 ref 状态定义一个表单类型，并将表单初始值类型设置为它： import { FormikProps } from "formik"; const formikRef = useRef<FormikProps<HelpFormInitialValues>>(null); 现在您可以在 Formik 状态下使用 ref 的所有属性，而不会出现任何 typescript 错误，并且还可以获得自动完成的好处。 if (formikRef.current) formikRef.current.resetForm(); if (formikRef.current) formikRef.current.isValid();

如何像 React 在 onChange、onClick 等中公开“param”？

我想做 React 用 onClick、onChange 等做的事情。 React 的作用是： onClick={(事件)=>console.log(事件)} 我想要做： someProp={(wanna_do_this)=>console.log(wanna_do_this)}

React Native Webview“onNavigationStateChange”仅在 iOS 设备上返回空 document.title

我正在尝试使用 Paypal 创建付款结账流程，并使用 WebView 处理 ExpressJS 后端的请求。 React Native 应用程序读取

在材质 UI 中居中网格项目

我尝试将 Material UI 的网格项居中，但我无法实现这一点。文档说你可以使用 justifyItems 和alignItems 道具，但我无法通过使用这个来实现这一点......

如何在Next.js中循环打字机效果？

我的项目中有这个打字机效果；然而，它只输入一次。我希望打字机效果能够循环播放。就像，我希望它重新开始并再次输入单词。我一直在寻找...

使用手势处理程序在我的反应本机代码中出现错误

我正在 js 文件中使用 React Native Gesture Handler，当我运行代码时，我收到此错误 错误 [react-native-gesture-handler] 手势中的一些回调是工作集，一些是...

使用React测试库模拟ANTD表单钩子

我想模拟 const [form] = Form.useForm();来自 ANTD。 const form= jest.mock('antd', () => { const OriginalModule = jest.requireActual('antd'); 返回 { 形式： { ...

“const 声明中缺少初始化程序。”反应错误

我的反应类有问题，它说我在 const 声明中缺少初始值设定项。谷歌搜索后我不知道如何解决它。 这是我的班级 导入 React, { useEffect, useState }

为什么 Chrome 网络安全阻止我的第一方 cookie？

我正在尝试从托管我的 api 服务器的整体架构并将 SPA 反应为单独的托管选项（在同一域上，只是不同的子域）。 我的前端托管在 app.domain.com 上，并且 bac...

在三个js中确定添加阴影所需的表面

我最近正在学习三个js，我试图通过下载模型来模仿下面链接中出现的场景 https://sketchfab.com/3d-models/ccity-building-set-1-

在 React Router 中重定向所有没有根文件夹的路径匹配

我正在使用react-router-dom版本6.3.0，我试图让我的路由器处理更新的URL结构。 例如，我的旧路线如下所示： 我正在使用 react-router-dom 版本 6.3.0，我正在尝试让我的路由器处理更新的 URL 结构。 举个例子，我的旧路线如下所示： <Route path='animals/dog' element={<Dog />} /> <Route path='animals/cat' element={<Cat />} /> <Route path='animals/bird/songs' element={<BirdSongs />} /> 我希望它们在没有根文件夹的情况下自动重定向animals： <Route path='dog' element={<Dog />} /> <Route path='cat' element={<Cat />} /> <Route path='bird/songs' element={<BirdSongs />} /> 所有内容都需要重定向到之前所在的位置，但我不想在我的应用程序中为每个可能的Route手动编写重定向。 React Router 可以做到这一点吗？在我的情况下，我无法使用 .htaccess 或 301 重定向。它必须发生在 React Router 本身中。 似乎已经回答了：https://stackoverflow.com/a/43533070/14258470 希望这有帮助！ 如果这不是您正在寻找的答案，请提供更多背景信息，我会调整我的答案以更好地适应OP。

react 本机版本检查包使应用程序崩溃

我已通过yarn安装了react-native-version-check到我的项目中，当我使用某些功能时，应用程序崩溃向我发送以下消息： 警告[类型错误：网络请求失败] 这仅发生在...

为什么使用此代码获取的 API 数据没有显示在我的网站上？它显示在控制台中-react.js

使用以下代码，我可以在控制台中看到我的数据，但屏幕上没有显示任何内容，并且控制台中没有错误。我认为我的映射返回存在问题，但没有

react不允许的情况下为什么我可以提前返回？

从 'react' 导入 React,{useState}; 函数汽车（）{ const [count, setCount] = useState(0); 归还汽车！； } 导出函数 App(props) { const [count, setCount] = 我们...