如何使用使用效果挂钩注册事件?

我正在遵循一个关于如何注册事件与挂钩的 Udemy 课程, 教师给出了以下代码: const [userText, setUserText] = useState(''); const handleUserKeyPress = event => { const { key, keyCode } = event; if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) { setUserText(`${userText}${key}`); } }; useEffect(() => { window.addEventListener('keydown', handleUserKeyPress); return () => { window.removeEventListener('keydown', handleUserKeyPress); }; }); return ( Feel free to type! {userTex ……

共6个回答,已解决, 标签: javascript reactjs react-hooks
未知的浏览器 kaios

我已经更新了我的项目, 以使用节点和纱线的最后版本, 在此升级后, 现在我的反应项目不想与 "浏览器列表" 一起工作。 我运行 "纱线启动", 并得到此错误: ./src/assets/css/material-dashboard-react.css?v=1.2.0 (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/assets/css/material-dashboard-react.css?v=1.2.0) BrowserslistError: Unknown browser kaios at Array.reduce () at Array.some () at Array.filter () at new Promise () 我有以下版本: * 节点 v10.15。3 * npm 6.9。0 * 纱线 v1.15。2 还有我的包。 { "name": "frontend", "version": "0.1 ……

共5个回答,已解决, 标签: javascript reactjs react-scripts
在 Set间隙中使用 "反应状态" 挂钩时状态不更新

我正在尝试新的反应钩, [https://reactjs.org/docs/hooks-intro.html]并有一个时钟组件与计数器, 这应该是增加每一秒钟。但是, 该值不会超过1。 function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( Seconds: {time} ); } ReactDOM.render(, document.querySelector('#app')); ……

共4个回答,已解决, 标签: javascript reactjs react-hooks
在三元运算符中使用 OR

我有一个简单的三元运算符, 我想用两个不同的字符串返回 null。 this.props.sportType === 'tennis' || 'soccer' ? null : N/A 但不幸的是, 这并不完全管用。如何使用在三元运算符中正确吗? 谢谢!:) ……

共4个回答,已解决, 标签: javascript reactjs
根据恒定条件调用反应钩是否安全?

钩子 [https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level] 规则要求在每次渲染时调用相同的钩子和相同的顺序。如果你违反了这个规则, 会有一个解释。例如, 此代码: function App() { console.log('render'); const [flag, setFlag] = useState(true); const [first] = useState('first'); console.log('first is', first); if (flag) { const [second] = useState('second'); console.log('second is', second); } const [third] = useState('third'); console.log('third is', third); useEffect(() => setFlag(false), []); return null; ……

共4个回答, 标签: javascript reactjs eslint react-hooks
我的默认参数为什么失败?

我的 Javascript 函数引导我的控制台返回我: > Type error: style 为 null 这里的片段: Let style = { 一: 1, 二: 2, 三: 3 } 函数 styling (style = style,。..RuleSetStock) { 返回 ruleSetStock.图 (以下命令 => { 控制台日志 (规则集) 【规则集】返回样式 }) } 控制台。日志 (样式 (null 、 “一” 、 “二” 、 “三”)) 我不明白为什么在我看来一切都很棒 任何提示都很棒,谢谢。 ……

共3个回答,已解决, 标签: javascript reactjs ecmascript-6 default-parameters
如何全局安装所有依赖包?

当我创建 react app 时,会在 app/project 文件夹下创建包含数千个包的 node_modules,如果我创建了十多个应用程序,那么 node_modules 文件夹。所以这种方式用成千上万个包重复同一个 node_modules 文件夹,我认为这不是一个好主意。经过很长一段时间,系统因基于 npm 的项目创建的数百万个文件和文件夹而变慢。如果 node_modules 从全局运行,则 app/project 将快速安装,并且不会安装重复/重复的软件包。 当创建/安装任何应用程序/项目时,我想在全球范围内安装一个 node_modules 文件夹,其中包含数千个包 (在应用程序文件夹下)。 我一直在使用全局命令,如: Npm-500g 装 纱线-g 安装 ……

共3个回答, 标签: reactjs react-native npm npm-install create-react-app
正确或标准的方式来玩 DOM 在反应

我有两个 divs, 我想达到的是, 当我点击 div left_1 然后 divs right_1 设置 aria-selected=true 和 right_2 设置 aria-selected=false , 相同的行为 left_2 等 +------------+ +-------------+ | div left_1 | | div right_1 | +------------+ +-------------+ +------------+ +-------------+ | div left_2 | | div right_2 | +------------+ +-------------+ ... DOM 可以很容易地发挥香草 JavaScript, 类似 document.getElementByClassName('left_1')[0].addEventListener('click', e => { document.getElementByClassName('right_1')[0].setAttri ……

共2个回答, 标签: reactjs
在 Formik 的 handleSubmit 中添加一个反应引导警报

我试图在我的 Formik 表单中添加一个反应引导警报,以便 handleSubmit 向用户包含表单提交的警报。 我已经使用了 react-bootstrap 记录的警报形式, 然而,我不得不改变最后一行,因为这似乎不起作用 (错误说,如果我使用 react-bootstrap 记录的警报形式,我没有导出任何内容。 我的提醒是: 从 “反应” 导入反应; 导入 { 警报, 按钮, } 从 “反应引导”; 扩展 React.组件 { 构造 (道具) { 超级 (道具); 状态 = {show: true}; } 渲染 () { Sethandle= () => 此.setState ({show: false}); Sethandleshow = () => this.setState ({show: true}); 退货 ( <> 感谢您的关注 我们将很快与登录详细信息联系。 关闭 {!此状态。显示和显示警报} ); } } 导出默认提醒; 文档显示最后一行: 渲染 (); 如果我尝试使用它,则会出现一条错误消息,表示没有定义渲染,并且没有导出任何内容。所 ……

共2个回答, 标签: javascript reactjs react-bootstrap formik
当固定元素位于另一个绝对元素之上时,它会丢失

我有一个固定的导航箭头,它的操作是正确的,直到它通过一个绝对元素,左边有一个滑动动画, 那一刻,我的 “固定” 箭头随着动画一起移动,它从屏幕上消失了。 当用户向上滚动到该位置时,我在一个相对容器中有两个绝对 div,这两个 div 分别向左和向右移出屏幕。当动画被触发时,我的导航箭头随之下降。 这是我的 scss /* 箭头 */ “导入”../scss/变量; 。箭头 { 显示: 块; 岗位: 固定; 右: 15px; 底部: 15px; Svg { 填充: # fff; 宽度: 50px; } } 。我的反弹 { 动漫名称: my_bounce; 动画-时长: 2 秒; 动画-方向: 交替; 动画-迭代-计数: 无限; } /*********** 盒子 ./ 。About_cont { 背景: url (“..//图像/about-movil.jpg”) 顶部中心; 背景尺寸: 封面; 显示: flex; 高度: 100vn; 相对位置; } 。关于盒子 { 显示: flex; 宽度: 50vw; 对齐项目: 中心; 字体系列: “panton”; 职位: 绝对; 高度: 100vn;; ……

共1个回答, 标签: css reactjs sass
无法解析模块 "react-redus\ libentents\ connect"

我正在将我的项目更新到最新版本 react, react-redux, react-dom, etc , 并遇到以下错误: ERROR in ./app/components/Modules/AdsBanner/index.js Module not found: Error: Cannot resolve module 'react-redux/lib/components/connect' in /home/cpt/Desktop/prod/local/app/components/Modules/AdsBanner @ ./app/components/Modules/AdsBanner/index.js 51:15-60 下面是代码中冲突来自的部分: import connect from 'react-redux/lib/components/connect'; //some code export default connect(({regular}) => ({regular}))(AdBanner); 你能告诉我是否值得回滚到以前的版本 react-redux , 或者重写这部分 ……

共1个回答, 标签: javascript reactjs redux react-redux
正确使用异步数据加载的还原方法

我使用从 redux 应用程序中的后端加载数据 react 。我正在加载一堆带有公理的数据, 然后我可以选择一个项目, 并在不同的视图中查看特定信息。每次在后端进行搜索时, 我都会呈现一个 "加载" 视图。问题是: 每当我加载视图刷新浏览器时, 此搜索都是可以的。但是, 当我在自己的应用程序中导航时, 我 react-router-dom 使用, 我不需要显示加载屏幕, 因为它已经在 redux 存储中。 如果我已经有了数据, 是否有办法告诉 redux 或做出反应, 不要拨打异步电话? 再杜莎是否坚持 [https://github.com/rt2zz/redux-persist]这方面的解决方案?我应该手动做它与一个条件的反应? 我在方法中进行调用 componentDidMount ……

共1个回答, 标签: reactjs redux
使用变量设置样式 div 的背景颜色

我试图设置使用样式 div 的 react 组件的背景颜色。我从另一项服务中获得了颜色值, Div 的样式如下: 康斯特 ContainerDiv = 风格。格" 背景: 背景颜色; '; 我从服务中获取背景颜色,并验证它返回了正确的值: # FFFFFF 然而,当我使用上述代码时,背景颜色不会改变。但是,如果我将值硬编码为 # FFFFFF,则背景颜色会发生变化。 ……

共1个回答, 标签: javascript html css reactjs
Express api 获取请求返回未定义的 [副本]

这个问题在这里已经有了答案: * 尝试在模式下使用获取和传递 [/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors]4 个答案 所以我花了几个小时试图弄清楚到底发生了什么。..我要输了. 所以我有一个简单的应用程序,它的服务器部分是在 nodejs 中制作的,前端是在 react 中制作的,它们运行在不同的端口上,所以我使用 无论如何,这是我使用 express 的 nodejs api App.use (bodyParser.json ()); 应用程序的使用 (bodyParser。urlencoded ({加长: 真实})); App.use (); App.get ('/',(req,res) => { Res.send ({数据: “Hello”}); }); App.listen (port,() => console.log ('$ on port $ {port}')); 然后从 react 中获取以下请求 获取 (“http://www.localhost: 5000/”,{ 方法: “ge ……

共1个回答,已解决, 标签: node.js reactjs express cors fetch-api
React: 找不到模块: 无法解析 &ldquo;React-html-parser&rdquo;

我正在尝试安装Html 解析器在我的 docker 容器 “客户端” 中: Docker-compose.yml 客户/ Dockerfile-dev Node_modules/ Src/ 组件/ 种子。 并尝试在这里导入它: 种子。 从 “react” 导入 React,{组件}; 进口 ReactHtmlParser,{processNodes,convertNodeToElement,htmlparser2} 来自 “react-html-parser”; 进口 axios 'axios' 的; 'Axios'和'React'安装好了,但没有“React-html-parser”。控制台将错误记录给我: Index.js: 1437/Src/组件/种子 找不到模块: 无法解决 “/usr/src/app/src/组件” 中的 “反应-html-参数” Json 包 { “姓名”: “客户”, “版本”: “0.1.0”, “私人”: 真的, 【依赖】: { “Axios”: “^ 0.18.0”, “反应”: “16.8.2”, “Dom-dom”: “16.8.2”, "Dom- ……

共1个回答,已解决, 标签: reactjs docker docker-compose
Axios-拦截器在请求错误时不工作-401 代码

我有一个简单的 react 应用程序,它使用第三个 API 来获取数据。在发出任何请求之前,必须检索令牌,以便在标题中使用它。此令牌是通过传递客户端 id 和秘密 id 使用相同的 API 创建的 -- API 是 Artsy API。此令牌具有到期日期,因此如果令牌不存在,必须请求此 API。获得令牌后,我可以毫无问题地调用其他请求。 我已经在一个单独的文件中设置了 API 请求,如下所示: Apis.js 进口 Axios 'axios' 的; Https baseURL = 'https://api.artsy.net/api; //设置 xap-token 并设置 tot 默认标题 康斯特实例 = Axios 的创造 ({ BaseURL: baseURL '/tokens/xapp _ token', Params: { “Client _ id”: 进程。 “Client _ secret”: 进程。 } }); 实例。拦截器。请求。使用 (未定义,err => { 康斯特状态 = 错误的反应?错误的反应.: 零; 控制台日志 (“授权”,错误响应) 如果 (状态 = = 401) { ……

共0个回答, 标签: reactjs axios
在 React 中实施星级评定计数器

我试图在组件上添加一个开始评级作为优先级指标。我有设计和它应该如何运作,但是我是新来的,不确定如何做。 图片: enter image description here [https://i.stack.imgur.com/kS4fI.png] enter image description here [https://i.stack.imgur.com/KJKP2.png] enter image description here [https://i.stack.imgur.com/oZWDs.png] 下面的代码是每个任务的大纲。我有一个 Stars 组件,我将把它作为一个单独的组件来实现。我不确定使用某种图书馆还是从头开始写会更好。我认为对于每一颗星星,我都会使用 Awesome Awesome。 到目前为止的代码: 从 “反应” 导入反应; 从 “道具类型” 导入道具类型; 从 “@ material-ui/core/styles” 导入 {withStyles}; 从 “@ material-ui/core/Grid” 导入网格; 从 “@ material-ui/core/pape ……

共0个回答, 标签: javascript reactjs ecmascript-6
如何让我的 react 应用程序仍然在 lint 错误下运行?

我正在使用 webpack 开发一个 React 应用程序,当我运行 “npm start” 时,构建需要很长时间, 但是,如果有 lint 错误,它将在构建结束时以 “退出状态 1” 失败,我需要修复错误,然后运行 “npm start”。 错误是像 “未使用的 var” 、 “线路太长” 等。所以他们不应该阻止应用程序运行,也浪费了我等待它再次构建的时间。 我仍然希望看到 lint 错误,但是如何阻止它们导致构建退出? ……

共0个回答, 标签: reactjs npm webpack visual-studio-code
当我改变一个不相关的状态时,为什么我所有的组件都在重新考虑?

我试图在不重新加载整个应用程序的情况下更改状态。由于某种原因,这种情况没有发生,当我设置一个甚至没有传递给特定组件的对象的状态时,该组件会无缘无故地更新。 所以在下面的代码中,当我设置消息时,主要内容不应该重新加载。 Set[ 消息,setMessage] = useState ({}); 这将导致整个应用程序,包括 “我的组件” 重新加载 退货 ( //除非在 PROP 中传入,否则不应该重新加载 ); 如何确保只有具有以下功能的组件消息Prop 更新了,没有其他组件重新安装? ……

共0个回答, 标签: javascript reactjs render react-hooks
跟踪选中了哪个复选框

我从 JSON get 查询中填充了一个复选框列表。我需要跟踪所有被选中的复选框。此外,在点击提交按钮后,我需要将选中的复选框转换成 JSON 格式。 我的 JSON 看起来是这样的: [ { 姓名: "per1", Perid: “1”, }, { 姓名: “permission2”, 任务 id: “2” } ] 我有复选框,其中包含以 permissionName 为标签的各种权限。我需要跟踪选中的所有复选框。 扩展组件 {导出默认类权限 构造函数 () { 超 (); 状态 = { 模式: [, } } () { 选中复选框 = 新的 Set (); PermissionsApi。getAllPermissionList () 。然后 ( 结果 => { 此。 setState ({模式: 结果}); 控制台日志 (结果); }, 错误 => { HandleError (错误); } ) 。抓 (这个。车把错误); } 渲染 () { 退货 ( {此。状态。模式。映射 (权限,权限 id) => { 退货 ( {权限。权限名称} ) })} 单击此按钮时转换为 JSON。 ……

共0个回答, 标签: reactjs forms