英文:
How do I fix ':' expected.ts(1005) in a for-of loop in TypeScript?
问题
我正在做的是在我的React项目的CardContainer组件中读取位于public目录中的JSON文件，如下所示：
import { useAsync } from "react-async";
type ProjectData = {
title: string,
desc: string,
website: string,
repo: string,
tags: Array<string>
}
type ProjectContainerData = {
projects: Array<ProjectData>
}
async function getData() {
let output: ProjectContainerData | undefined = undefined;
await fetch("/myProjects.json")
.then((response) => response.text())
.then((data) => {
output = JSON.parse(data);
});
return output;
}
function CardContainer() {
const { data, error, isPending } = useAsync(getData);
for (let project of data?.["projects"]) {
// error is here
}
return <></>;
}
export default CardContainer;
当我编辑我的代码时，我看到了':' expected.ts(1005)错误。当我尝试使用npm start编译它时，我看到了相同的错误：
ERROR in src/components/CardContainer.tsx:27:42
TS1005: ':' expected.
25 | function CardContainer() {
26 | const { data, error, isPending } = useAsync(getData);
> 27 | for (let project of data?.["projects"]) {
| ^
28 |
29 | }
30 | return <></>;
我的TypeScript版本是4.9.5。是否有简单的方法来避免这个错误？
英文:
What I am doing is reading a JSON file located in the public directory of my React project in the CardContainer component, as can be seen below:
import { useAsync } from "react-async";
type ProjectData = {
title: string,
desc: string,
website: string,
repo: string,
tags: Array<string>
}
type ProjectContainerData = {
projects: Array<ProjectData>
}
async function getData() {
let output: ProjectContainerData | undefined = undefined;
await fetch("/myProjects.json")
.then((response) => response.text())
.then((data) => {
output = JSON.parse(data);
});
return output;
}
function CardContainer() {
const { data, error, isPending } = useAsync(getData);
for (let project of data?["projects"]) {
// error is here
}
return <></>;
}
export default CardContainer;
When I am editing my code, I see the ':' expected.ts(1005) error. When I try to compile it with npm start, I see the same thing:
ERROR in src/components/CardContainer.tsx:27:42
TS1005: ':' expected.
25 | function CardContainer() {
26 | const { data, error, isPending } = useAsync(getData);
> 27 | for (let project of data?["projects"]) {
| ^
28 |
29 | }
30 | return <></>;
My TypeScript version is 4.9.5. Is there any way to easily avoid this error?
答案1
得分: 1
?[...] 运算符不存在，正确的语法是 ?.[...]
因此 ?.['projects'] 或者 ?.projects
参考链接:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#syntax
英文:
?[...] operator does not exist, the right syntax for it is ?.[...]
Hence ?.['projects'], or ?.projects
References:
答案2
得分: -1
更新：当我将这段代码更改为以下内容时，错误消失了：
const { data, error, isPending } = useAsync<ProjectContainerData | any>(getData);
以及当我将这段代码更改为以下内容时：
for (let project of data.projects) {
英文:
Update: The error goes away when I change this:
const { data, error, isPending } = useAsync(getData);
to this:
const { data, error, isPending } = useAsync<ProjectContainerData | any>(getData);
and when I change this:
for (let project of data?["projects"]) {
to this:
for (let project of data.projects) {
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论