介绍 我在 create-react-app 应用程序中有一个用户输入元素。它允许用户输入数字,或使用箭头向上或向下增加数字。然后输出显示这个数字。
问题 用户想要到达某个数字,无论他们如何输入数字,都会有虚假的中间值触发 onChange 事件侦听器。如果用户尝试使用键盘输入“15”,则输出首先是“1”,然后是“15”,但我希望它只是“15”。我不想使用按钮/提交/等或其他事件。如果用户按下并按住从 0 到 500 的向上箭头,我想在“快速变化”输入减慢/停止后直接更新到 500。
目标 我想编写一个 onChange 函数,以便仅在 onChange自上次事件以来至少 600 毫秒未触发事件时才更新输出。
详细信息 如果用户键入 '1' 和 '5'(表示 '15' )的间隔小于 600 毫秒,则输出应更新为 '15',并跳过 '1'。但是,如果用户在键入“1”和“5”之间的时间超过 600 毫秒,则输出应首先是“1”,然后是“5”。同样,如果用户非常快速地上下按下增量箭头,则输出不应更新,直到它们停止或减慢。
在终端中,使用 create-react-app 制作一个反应应用程序
create-react-app delay-output-app
Run Code Online (Sandbox Code Playgroud)
将代码 复制并粘贴到 delay-output-app/src/App.js 中,替换之前的所有代码。
import React, { useState, useEffect, useRef } from "react";
import "./App.css";
function App() {
const inputRef = useRef();
const [userValue, setUserValue] = useState(0);
const [output, setOutput] = useState(0);
const updateOutput = () => {
setUserValue(inputRef.current.value);
setOutput(inputRef.current.value); …
Run Code Online (Sandbox Code Playgroud) I have an express-react-typescript-redux-passport project where I am using createApi
from redux toolkit to call a /getuser
api on my backend.
I'm using passport-google-oauth20
strategy to authenticate users, and the user is successfully authenticated.
My issue is that passport js deserializeUser()
function is not called (even though the serializeUser()
is called, and the user is authenticated using google strategy), so the req.user
parameter is not set automatically when the front end sends requests to the back end.
I suspect that …
如何使用 React App 连接多个 API?
使用 http-proxy-middleware 与 Express 后端创建-react-app。
演示错误: https: //github.com/svgpubs/nodeproxy.git
我正在尝试http-proxy-middleware
将演示 React 应用程序连接到两个不同的服务器:一个外部网站https://api.coingecko.com/api/
和一个内部网站http://localhost:3001/
它适用于外部网站。但是,localhost:3001 连接不起作用。
如果我不使用 http-proxy-middleware (通过添加'proxy: 'http://localhost:3001'"
),我可以连接到 localhost:3001 package.json
- 但是,那么我只能有一个代理。
这是正在运行的应用程序:如您所见,localhost:3001 没有响应
错误:我尝试了很多不同的变体。我要么从浏览器获取 cors 块,要么 localhost api 从 public/index.html 返回 index.html 文件 - 导致浏览器中出现 json 解析错误。在服务器上,根据 localhost 端点的确切路由,我有时会收到 50 多行此错误:
Error occurred while trying to proxy request /localhostapi/users from localhost:3001 to http://localhost:3001/ (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
如何设置服务器和代理,以便 App.js 可以连接到 localhost:3001 路由和外部 API?
这是我的App.js
import React, { useEffect, …
Run Code Online (Sandbox Code Playgroud) proxy express create-react-app http-proxy-middleware react-fullstack
阅读文档,React Data Table
似乎有一种方法可以将额外的 Props 传递给expandableRowsComponent
.
这是从文档中复制粘贴的:
ExpandableComponentProps 允许您将额外的 props 传递给扩展器组件并防止 TypeScript 抱怨:
import * as React from 'react';
import DataTable, { ExpanderComponentProps } from 'react-data-table-component';
interface Row {
title: string;
director: string;
year: string;
}
interface Props extends ExpanderComponentProps<Row> {
// currently, props that extend ExpanderComponentProps must be set to optional.
someTitleProp?: string;
}
const ExpandableRowComponent: React.FC<Props> = ({ data, someTitleProp }) => {
return (
<>
<p>{someTitleProp}</p>
<p>{data.title}</p>
<p>{data.director}</p>
<p>{data.year}</p>
</>
); …
Run Code Online (Sandbox Code Playgroud) 如何使 d3 data() 函数理解我的数据类型?
D3 data() 认为参数的d
类型为unknown
,但事实并非如此。
interface DataType {
id: string;
display: string;
}
const mydata: DataType[] = [{ id: "abc", display: "First Value" }];
d3.selectAll("rect").data(mydata, (d) => d.id);
//(parameter) d: unknown
Run Code Online (Sandbox Code Playgroud)
将鼠标悬停(d)
在 VSCode 上我收到打字稿消息(parameter) d: unknown
将鼠标悬停 => d.id
在 VSCode 上,我看到打字稿错误Object is of type unknown ts(2571)
在另一个密切相关的问题中,一些人建议确保结果 d.id 被强制作为字符串,但这对我来说仍然不起作用。但是,它确实改变了打字稿错误。
//force string
d3.selectAll("rect").data(mydata, (d: DataType) => `${d.id}`);
Run Code Online (Sandbox Code Playgroud)
类型“(d: DataType) => string”的参数不可分配给类型“ValueFn<BaseType |”的参数 HTMLElement,未知,KeyType>'。参数“d”和“datum”的类型不兼容。类型“未知”不可分配给类型“DataType”.ts(2345)
我使用的是 typescript 4.8.2 我安装了整个 d3 …
nicole@MacBook-Air client % mongosh
Current Mongosh Log ID: 6167b26073f2085eee4554b6
Connecting to: mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000
Using MongoDB: 5.0.3
Using Mongosh: 1.1.0
For mongosh info see: https://docs.mongodb.com/mongodb-shell/
------
The server generated these startup warnings when booting:
2021-10-13T15:36:00.307-07:00: Access control is not enabled for the database. Read and write access to data and configuration is unrestricted
------
test> show dbs
admin 41 kB
config 111 kB
local 41 kB
test 8.19 kB
test> use test
already on db test
test> show collections
users
test> test.users.find() …
Run Code Online (Sandbox Code Playgroud) reactjs ×3
express ×2
typescript ×2
d3.js ×1
input ×1
mongo-shell ×1
mongodb ×1
onchange ×1
passport.js ×1
proxy ×1
rtk-query ×1
setinterval ×1
settimeout ×1