小编sli*_*wp2的帖子

我正在尝试将Promise.allSettledAPI 与 TypeScript一起使用。代码在这里：

server.test.ts：

it('should partial success if QPS > 50', async () => {
  const requests: any[] = [];
  for (let i = 0; i < 51; i++) {
    requests.push(rp('http://localhost:3000/place'));
  }
  await Promise.allSettled(requests);
  // ...
});

但是 TSC 抛出一个错误：

'PromiseConstructor'.ts(2339) 类型上不存在属性 'allSettled'

我已经将这些值添加到lib选项中tsconfig.json：

tsconfig.json：

{
  "compilerOptions": {
    /* Basic Options */
    "target": "ES2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "commonjs" /* Specify …

我有两个组件：App和Child。我使用useRefhook 来获取组件中的 DOM 元素Child并对其进行一些处理。

我还使用API在组件之间ref传递。AppChildReact.forwardRef

App.tsx：

import { useRef } from "react";
import Child from "./Child";

export default function App() {
  const ref = useRef(null);
  console.log("App ref: ", ref);
  return (
    <div className="App">
      <Child ref={ref} />
    </div>
  );
}

Child.ts：

import React, { useEffect, useRef } from "react";

export default React.forwardRef((props, ref) => {
  const innerRef = useRef<HTMLDivElement>(null);
  const divElement = ref || innerRef; // …

我正在使用一个有副作用的简单组件。我的测试通过了，但我收到警告Warning: An update to Hello inside a test was not wrapped in act(...).。

我也不知道这是否waitForElement是编写此测试的最佳方法。

我的组件

export default function Hello() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      setPosts(response.data);
    }

    fetchData();
  }, []);

  return (
    <div>
      <ul>
        {
          posts.map(
            post => <li key={post.id}>{post.title}</li>
          )
        }
      </ul>
    </div>
  )
}

我的组件测试

import React from 'react';
import {render, cleanup, act } from '@testing-library/react';
import mockAxios from …

我正在尝试history.push在新useHistory钩子上模拟react-router并使用@testing-library/react. 我只是像这里的第一个答案一样嘲笑模块：How to test components using new react router hooks?

所以我在做：

//NotFound.js
import * as React from 'react';
import { useHistory } from 'react-router-dom';


const RouteNotFound = () => {
  const history = useHistory();
  return (
    <div>
      <button onClick={() => history.push('/help')} />
    </div>
  );
};

export default RouteNotFound;

//NotFound.js
import * as React from 'react';
import { useHistory } from 'react-router-dom';


const RouteNotFound = () => {
  const history = useHistory(); …

我想知道如何创建一个简单的桌面环境,如KDE,Gnome和LXDE,用于Linux,或者特别是Ubuntu/Kubuntu,但我不知道如何开始以及它有多复杂.

我想创建一个简单,高效和轻量级的桌面,并重现KDE,Gnome和Windows XP的一些优秀功能.我不想重新发明轮子,我想设计图形界面和主要对话框.

我可以在Qt中使用C++,也可以使用X11调用.像TWM这样的简单桌面将是第一步,然后我可以添加任务栏,开始菜单,新功能和玩新想法.

谢谢.

编辑

我安装了icewm,我认为这是我需要开始的.在登录屏幕上,我可以选择是使用KDE(桌面环境)还是使用icewm(窗口管理器).我不明白窗口管理器究竟是什么.

我已经下载了icewm源代码,我很困惑.我必须理解一些概念,例如,加载桌面后登录屏幕后会发生什么,窗口如何工作等等.

编辑2

我想我需要一个很好的教程.我必须了解Window Manager或桌面环境的工作原理.我必须知道一些概念.

由于HTML data属性允许添加任何自定义数据,我想知道将一组JSON列表作为data属性包含是一个好主意吗？然后,相应JSON的JavaScript事件可以通过事件轻松访问getAttribute("data-x").

实际上,我的问题是:向HTML属性添加大量数据是标准的,高效的和合理的吗？

例如

<div data-x="A LARGE SET OF JSON DATA" id="x">

或者大量的JSON数据必须存储在<script>标记内,并且HTML属性不适合大型数据集,即使对于data属性也是如此.

为什么不能useEffect()使用 async-await？

const Home: React.FC = () => {
    
    useEffect(async () => {
        console.log(await ecc.randomKey())
    }, [])
    
    return (
    ...

我得到的错误是

“() => Promise”类型的参数不可分配给“EffectCallback”类型的参数。

类型 'Promise' 不可分配给类型 'void | (() => void | undefined)'。

类型 'Promise' 不可分配给类型 '() => void | 不明确的'。

类型 'Promise' 不匹配签名 '(): void | 未定义'.ts(2345)

我正在尝试在 Jest 官方文档中执行模拟模块示例： https: //jestjs.io/docs/mock-functions

test('should fetch users', () => {
  const users = [{name: 'Bob'}];
  const resp = {data: users};
  axios.get.mockResolvedValue(resp);

  return Users.all().then(data => expect(data).toEqual(users));
});

但是mockResolvedValue给了我这个打字稿错误：

类型“<T = any, R = AxiosResponse>(url: string, config?: AxiosRequestConfig | undefined) => Promise”上不存在属性“mockResolvedValue”。ts(2339)

我的开发依赖：

"devDependencies": {
    "@babel/cli": "7.13.0",
    "@babel/core": "7.12.17",
    "@babel/plugin-proposal-class-properties": "7.12.13",
    "@babel/preset-env": "7.12.17",
    "@babel/preset-react": "7.12.13",
    "@babel/preset-typescript": "7.12.17",
    "@jest/reporters": "26.6.2",
    "@types/axios": "0.14.0",
    "@types/jest": "26.0.20",
    "@types/luxon": "1.26.2",
    "@types/node": "14.14.35",
    "@types/react": "17.0.3",
    "@types/react-dom": "17.0.2",
    "@types/react-redux": "7.1.16",
    "@types/react-router": "5.1.12",
    "@types/react-router-dom": "5.1.7",
    "@types/redux-actions": "2.6.1", …

在使用 为我的项目安装依赖项时npm install，我收到以下错误，但我不知道如何解释：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: soft-ui-dashboard-pro-react@3.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.9 || ^15.3.0 || ^16.0.0" from react-quill@1.3.5
npm ERR! node_modules/react-quill
npm ERR!   react-quill@"1.3.5" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this …

vscode是我最喜欢的编辑器,我有一个代码格式问题.这是我的jsx代码:

return <div className={panelHeadingClassName}>
    <h3 className={style.panelTitle}>
        <i className={iconStyle[iconClass]}></i>
        {title}
        <small className={style.panelSubTitle}>{subTitle}</small>
    </h3>
</div>

当我使用option+ shift+ F格式化它时,它给了我这个:

return <div className = {
  panelHeadingClassName
} >
<
h3 className = {
  style.panelTitle
} >
<
i className = {
  iconStyle[iconClass]
} > < /i> {
  title
} <
small className = {
  style.panelSubTitle
} > {
  subTitle
} < /small> <
/h3> <
/div>

显然,这是不正确的.

vscode版本 - v1.10.2,而不是安装任何代码格式扩展名.

所以,我不想安装任何代码格式扩展,是否有任何配置vscode正确执行此操作？

- …