我有一个带有 Storybook 的 React/Typescript 项目。Storybook 工作得很好，但一旦我开始导入带有别名的文件，它就会崩溃。
例子：
import Foo from "@components/foo" => crash
import Foo from "../../components/foo" => ok该应用程序与别名一起工作正常。该问题仅与 Storybook 有关。
这是我的故事书配置：
module.exports = {
stories: ["../**/stories.tsx"],
webpackFinal: (config) => {
return {
...config,
module: {
...config.module,
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: { loader: "babel-loader" },
},
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.(png|jpg|gif)$/, use: ["file-loader"] },
{
test: /\.svg$/,
use: [
{
loader: "babel-loader",
},
{
loader: "react-svg-loader",
options: {
jsx: true, …我有一个功能可以通过 api post 请求更新用户。后台还没做好。因此，该函数将始终返回错误。为了测试加载和错误状态，我想在返回结果之前临时添加一个假延迟。怎么做呢？这是函数：
const updateProfile = async (form) => {
try {
const res = await api.post("/update-profile", form);
return res;
} catch (err) {
throw new Error("error.unknown");
}
};写这个不起作用：
const updateProfile = async (form) => {
try {
let fakeCallDone = false
setTimeout(()=> fakeCallDone = true, 2000)
const res = await api.post("/update-profile", form);
fakeCallDone && res;
} catch (err) {
throw new Error("error.unknown");
}
};我已将 React 项目升级到 Webpack 5。别名由 Babel 解析。Webpack 4 一切正常。但是当启动 webpack 开发服务器时，Babel 使构建崩溃，因为它无法解析自己的导入（在其源代码中）。
我检查了 Babel 运行时的节点模块。一切看起来都很棒：
// from the file babel/runtime/helpers/esm/toConsumableArray.js
import arrayWithoutHoles from "./arrayWithoutHoles";
import iterableToArray from "./iterableToArray";
import unsupportedIterableToArray from "./unsupportedIterableToArray";
import nonIterableSpread from "./nonIterableSpread";
export default function _toConsumableArray(arr) {
return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr)
|| nonIterableSpread();
}我的终端中显示以下错误：
ERROR in ../../node_modules/@babel/runtime/helpers/esm/toConsumableArray.js 4:0-52
Module not found: Error: Can't resolve './nonIterableSpread' in '/Users/MyNamee/Desktop/MyApp/node_modules/@babel/runtime/helpers/esm'
Did you mean 'nonIterableSpread.js'?
BREAKING CHANGE: The request './nonIterableSpread' failed to resolve only because it was …我有一个属性可以接收 0 到 256 之间的数字。如何在打字稿中输入这样的范围？
function foo(threshold:number){
//do stuff
}我需要在数组上使用 .flat() ，但 Typescript 声称：
类型 '[string, unknown][]' 上不存在属性 'flat'
我已将“es2019 添加到我的 tsconfig 文件中：
"lib": ["es2015", "es2019", "dom"],使用 flat() 的函数是：
const legendSeries = (series) => {
const formattedSeries = {};
series.map((serie) =>
Object.entries(serie).map((s) => {
if (s[0] in formattedSeries) {
return (formattedSeries[s[0]].count += s[1]);
}
return (formattedSeries[s[0]] = { id: s[0], label: s[0], count: s[1] });
})
);
return Object.entries(formattedSeries)
.flat()
.filter((_, i) => i % 2 !== 0);
};错误仍然存在。如何解决这个问题（这是一个 React 项目，以防万一）？
我有一个简单的函数，它在参数中接受一个对象。为了仅接收有效数据，我需要输入对象的键，如下所示：
type DataType = "about" | "favorites" | "username";
type UpdatedData = { [key in DataType]: any };
function onSave (updatedData: UpdatedData){
//do stuff
}
// in a component
const onClickSave = () => onSave({ "about": text });打字稿抛出以下错误：
'{ about: text; 类型的参数 }' 不可分配给“UpdatedData”类型的参数。输入 '{ 关于：文本；}' 缺少类型“UpdatedData”中的以下属性：收藏夹、用户名
如何解决这个问题？当然，我可以写[key: string]，[key in DataType]但打字就没用了。
我已阅读有关查询无效的反应查询文档。然而，它似乎对我不起作用。这是代码：
import React from "react";
import ax from "axios";
import { useQueryClient, useQuery } from "react-query";
export default function App() {
const queryClient = useQueryClient();
const [poke, setPoke] = React.useState("pikachu");
const getPokemon = async (id) => {
try {
const pokemon = await ax.get("https://pokeapi.co/api/v2/pokemon/" + id);
return pokemon;
} catch (err) {
throw new Error();
}
};
const { data, isLoading, isError } = useQuery(
["get-pokemon", poke],
() => getPokemon(poke),
{ cacheTime: 100000000 }
);
const getGengar = () => …我用来react-query调用API。该调用运行良好，并且每次在输入字段中更新查询值时都会执行该调用。
不幸的是，即使查询为空，它也会触发 API 调用。
例如，当用户加载应用程序时，输入（以及查询）将为空。
如何仅在有查询时触发API调用？
代码
// API call
export async function myQuery(query) {
try {
const res = await ax.get("myapiurl", {
params: { query },
});
return res.data;
} catch {
return null;
}
}
// react-query
const { status, data } = useQuery(
["myquery", { query }],
() => myQuery(query)
);
三天前，Visual Studio 要求访问我的钥匙串。我觉得很奇怪（我用了两年一样的VScode版本，官网下载的）。
每次打开软件我都拒绝访问，但是今天，我犯了一个错误，点击了“允许访问”。Vs Code问这样的事情正常吗？如果没有，如何从 VsCode 中删除对钥匙串的访问？以防万一，我立即从我的 mac 中删除了该应用程序。
我有一个上传器，允许用户上传多张图片。为了只创建或更新他想要添加/更改的图像，我更新了一个如下所示的对象：
{main: Blob, "1": Blob, "2":Blob}
所以如果以后只需要更新“1”，发送的对象将只包含
{"1": Blob}
单击保存时，它会触发一个函数，该函数应该将图像附加到 formData()。遗憾的是 formData 永远不会更新。我有以下错误：
无法在“FormData”上执行“append”：参数 2 的类型不是“Blob”。
export async function uploadImages(files, userId) {
try {
const images = new FormData();
files.main && images.append("image", files.main, "main");
files[1] && images.append("image", files[1], "1");
files[2] && images.append("image", files[2], "2");
const res = await ax.post(process.env.SERVER_URL + "/upload-images", {
images,
userId,
});
return "success"
} catch (err) {
return "error"
}
}如何解决这个问题？谢谢！
reactjs ×5
javascript ×4
typescript ×3
react-query ×2
webpack ×2
asynchronous ×1
babeljs ×1
file-upload ×1
form-data ×1
keychain ×1
macos ×1
piracy ×1
security ×1
settimeout ×1
storybook ×1