我们在 next.js 页面中有以下代码：
<Head>
<title>
Some text {title}
</title>
</Head>
一瞬间，我看到了像 <!--- ---> 这样的 html 注释（类似的东西）
我使用静态站点生成（getServerSideProps），并且我的文件有动态路由，例如[id]，所以我也使用getStaticPaths。
我该怎么办？
此行在
const files = Array.from(e.target.files);打字稿中产生错误。
我是打字稿的新手。看起来该对象不是类似数组的对象，但实际上是。我可以做什么来解决这个问题？
错误是：
“没有重载与此调用匹配。重载 4 中的 1，'(iterable: Iterable | ArrayLike): File[]'，出现以下错误。'FileList | null' 类型的参数不可分配给 'Iterable | ArrayLike 类型的参数'。类型 'null' 不可分配给类型 'Iterable | ArrayLike'。重载 2 of 4, '(arrayLike: ArrayLike): File[]'，出现以下错误。类型 'FileList | null' 的参数不可分配到“ArrayLike”类型的参数。“null”类型不能分配给“ArrayLike”类型。
这是代码：
import { ChangeEvent } from 'react';
import './styles.css';
export function App() {
const handleFileLoad = function (e: ChangeEvent<HTMLInputElement>) {
const files = Array.from(e.target.files);
// I want to use forEach here, so I attempt to convert it to an array.
};
return …我用 React 测试库编写了以下测试。当我在浏览器中检查它时，它有效。然而，在这里它不起作用。有什么问题吗？
it('Calls search callback on enter key press', () => {
const mockSearchCallback = jest.fn();
render(<Header onSearch={mockSearchCallback} />);
userEvent.type(screen.getByRole('textbox'), 'testquery');
userEvent.keyboard('{Enter}');
expect(mockSearchCallback).toHaveBeenCalled();
});
然而，它失败了。
Header其行为几乎就像一个包装器，所有逻辑都包含在搜索中。这是代码
export default function Search({ onSearch }: SearchProps) {
const [query, setQuery] = useState('');
const handleSubmit: React.FormEventHandler = (e) => {
e.preventDefault();
if (query) {
onSearch(query);
}
};
return (
<form className="c-search" onSubmit={handleSubmit}>
<input
className="c-search__input"
value={query}
onChange={(e) => setQuery(e.target.value)}
name="query"
autoComplete="off"
></input>
</form>
);
}
UPD 它适用于 userEvent 13，但不适用于 14。为什么？
javascript ×2
reactjs ×2
typescript ×2
arrays ×1
file ×1
jestjs ×1
next.js ×1
types ×1
unit-testing ×1