當我使用此組件時，出現以下錯誤。當我僅將完全相同的函式與另一個 API 一起使用時，它就起作用了，并且我從 API 獲得了輸出。
型別錯誤：items.map 不是函式 ApiInfo.render C:/Users/32479/mikiesoftMovies2/cinemaReact-master/src/components/ApiInfo.js:35
32 | 33 | return ( 34 | <div className = "App"> 35 | <h1> Fetch data from an api in react </h1> { | ^ 36 | items.map((item) => ( 37 | <ol key = { item.id } > 38 | Title: { item.original_title }
當我用另一個 API 嘗試它時，它起作用了，我根本沒有錯誤。我是 React 的新手，所以我不知道出了什么問題。
這是我的代碼（帶有給我錯誤的 API）它只是一個從 API 請求資訊并將其放入的代碼ol：
import React from "react";
export class ApiInfo extends React.Component {
// Constructor
constructor(props) {
super(props);
this.state = {
items: [],
DataisLoaded: false
};
}
// ComponentDidMount is used to
// execute the code
componentDidMount() {
fetch(
"https://api.themoviedb.org/3/movie/top_rated?api_key=55957fcf3ba81b137f8fc01ac5a31fb5&language=en-US&page=1")
.then((res) => res.json())
.then((res) => {
this.setState({
items: res,
DataisLoaded: true
});
})
}
render() {
const { DataisLoaded, items } = this.state;
if (!DataisLoaded) return <div>
<h1> Please wait some time.... </h1> </div> ;
return (
<div className = "App">
<h1> Fetch data from an api in react </h1> {
items.map((item) => (
<ol key = { item.id } >
Title: { item.original_title }
</ol>
))
}
</div>
);
}
}
export default ApiInfo;
我將添加一個來自我正在使用的 API 的 json 示例： 來自 API unminified 的 json
uj5u.com熱心網友回復：
您正在尋找的電影專案由電影資料庫 API 在 中回傳，而res.results不是在res：
this.setState({
items: res.results,
DataisLoaded: true
});
請參閱API 參考以了解評分最高的電影
附帶說明一下，處理 HTTP 錯誤情況是一種很好的做法，因此請考慮向 fetch 呼叫添加一個 catch 塊。
uj5u.com熱心網友回復：
變數items不是陣列。因此map不是函式。列印出變數res，您將看到隱藏在后面的內容以及您必須分配給的內容items。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/337243.html
標籤：javascript 反应
上一篇：使用useState成功將元素添加到陣列后，map方法不會渲染新元素
下一篇：從反應函式回傳陣列我哪里出錯了