英文:
Method .map don't work in application React
问题
对象的 .map 方法不起作用，我无法与导入的 API 对象交互。在浏览器控制台上，我读到了这个对象。
这是一个名为 "razze" 的组件。
const BASE_URL = "https://www.dnd5eapi.co/api/races";
const ListaRazze = () => {
const [razze, setRazze] = useState<RazzeArray>();
useEffect(() => {
fetch(BASE_URL)
.then((res) => res.json())
.then((results) => {
console.log('result', results);
setRazze(results);
const prova = Object.values(results);
})
.catch((error) => {
console.error('Error:', error);
});
}, []);
return (
<>
{razze && razze.razze ? (
razze.razze.map(({ indice, name, url }) => (
<div key={indice}>{name} {url}</div>
))
) : (
<div>Loading...</div>
)}
</>
);
};
export default ListaRazze;
这是一个位于 models 包中的接口：
export interface RazzeArray {
count: number
razze: Razza[]
}
export interface Razza {
indice: number
name: string
url: string
}
能够进入这个对象。
英文:
the .map method of the object doesn't work, I can't interact with the object of the API I imported. On the console of browser i read the object.
This is a component razze("races")
const BASE_URL = "https://www.dnd5eapi.co/api/races";
const ListaRazze = () => {
const [razze, setRazze] = useState<RazzeArray>();
useEffect(() => {
fetch(BASE_URL)
.then((res) => res.json())
.then((results) => {
console.log('result', results);
setRazze(results);
const prova = Object.values(results);
})
.catch((error) => {
console.error('Error:', error);
});
}, []);
return (
<>
{razze && razze.razze ? (
razze.razze.map(({ indice, name, url }) => (
<div key={indice}>{name} {url}</div>
))
) : (
<div>Loading...</div>
)}
</>
);
};
export default ListaRazze;
This is interface in a package models
export interface RazzeArray {
count: number
razze: Razza[]
}
export interface Razza {
indice: number
name: string
url: string
}
Being able to enter the object
答案1
得分: 0
接收到的数据与接口中期望的数据不同。请查看您的 api result 的属性并匹配属性名称。
我还建议您保持代码使用英文，以确保一致性和清晰度。
export interface IRaceList {
count: number
results: IRace[]
}
export interface IRace {
index: number
name: string
url: string
}
为您的状态设置一个初始值。这也会使您的代码更加可预测和一致。如果您不想要初始状态，请确保类型反映这一点。
const RaceList = () => {
const [raceList, setRaceList] = useState<IRaceList>({
count: 0,
results: []
});
useEffect(() => {
fetch(BASE_URL)
.then((res) => res.json())
.then((results: IRaceList) => {
setRaceList(results);
})
.catch((error) => {
console.error('Error:', error);
});
}, []);
return (
<>
{raceList.count ? (
raceList.results.map(({ index, name, url }) => (
<div key={index}>{name} {url}</div>
))
) : (
<div>Loading...</div>
)}
</>
);
};
英文:
The data you're receiving is different from the data you're expecting in your interfaces. Observe the properties of your api result and match the property names.
I'd also recommend that you keep your code in English for consistency and clarity.
export interface IRaceList {
count: number
results: IRace[]
}
export interface IRace {
index: number
name: string
url: string
}
Set an initial value for your state. This too will make your code more predictable and consistant. If you don't want an initial state, then make sure the types reflect that.
const RaceList = () => {
const [raceList, setRaceList] = useState<IRaceList>({
count: 0,
results: []
});
useEffect(() => {
fetch(BASE_URL)
.then((res) => res.json())
.then((results: IRaceList) => {
setRaceList(results);
})
.catch((error) => {
console.error('Error:', error);
});
}, []);
return (
<>
{raceList.count ? (
raceList.results.map(({ index, name, url }) => (
<div key={index}>{name} {url}</div>
))
) : (
<div>Loading...</div>
)}
</>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论