import React, { useState, useTransition } from "react";
function UseTransition() {
const [state, setState] = useState("");
const [list, setList] = useState([]);
const [isPending, startTransition] = useTransition();
const handleChange = (e) => {
setState(e.target.value);
startTransition(() => {
// Array这里报错 tsconfig.json 中不包含相应文件
const arr = Array.from({ length: 1000 }, (v, k) => k);
setList((list) => [...list, ...arr]);
});
};
return (
<div>
<h1>UseTransition</h1>
<input
type={"text"}
className={"border"}
value={state}
onChange={handleChange}
/>
<h1>{state}</h1>
{isPending
? "加载中"
: list.map((item, index) => (
<div key={index}>{state + "----" + item}</div>
))}
</div>
);
}
export default UseTransition;
解决: 修改tsconfig.json,在lib里面加上一个"ES6"
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext", "ES6"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
更新,改用es2020也解决了
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"noImplicitAny": false,
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"allowImportingTsExtensions": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}