英文:
same code working for other API but not for this API
问题
以下是您提供的代码的中文翻译：
相同的代码在另一个API上运行正常，但在这个API上不起作用。
如果我漏掉了什么，请告诉我。我无法解决这个问题，并收到以下错误消息：
`items.map不是一个函数`
```jsx
import React from "react";
class Statelist extends React.Component {
// 构造函数
constructor(props) {
super(props);
this.state = {
items: [],
DataisLoaded: false
};
}
componentDidMount() {
const apiUrl = "https://newsapi.org/v2/everything?q=tesla&from=2023-04-10&sortBy=publishedAt&apiKey=ad1b44319c0d4252ab7dcbfb0b2a4d9c";
fetch(apiUrl)
.then((res) => res.json())
.then((json) => {
this.setState({
items: json,
DataisLoaded: true
});
})
}
render() {
const { DataisLoaded, items } = this.state;
if (!DataisLoaded) return
<div>
<h1>请等一会儿....</h1>
</div>;
return (
{items.map((item) => (
<tr>
<td>{item.id}</td>
<td>{item.articles[0].author}</td>
<td>{item.name}</td>
<td>{item.email}</td>
</tr>
))}
);
}
}
export default Statelist;
希望这有助于您理解代码的内容。如果您需要进一步的帮助，请随时提出。
英文:
The same code working for another API but not for this API
Let me know if I am missing something. I'm not able to fix this issue and get this below error message
items.map is not a function
import React from "react";
class Statelist extends React.Component {
// Constructor
constructor(props) {
super(props);
this.state = {
items: [],
DataisLoaded: false
};
}
componentDidMount() {
const apiUrl = "https://newsapi.org/v2/everything?q=tesla&from=2023-04-10&sortBy=publishedAt&apiKey=ad1b44319c0d4252ab7dcbfb0b2a4d9c";
fetch(apiUrl)
.then((res) => res.json())
.then((json) => {
this.setState({
items: json,
DataisLoaded: true
});
})
}
render() {
const { DataisLoaded, items } = this.state;
if (!DataisLoaded) return
<div>
<h1>Pleses wait some time....</h1>
</div>;
return (
{items.map((item) => (
<tr>
<td>{item.id}</td>
<td>{item.articles[0].author}</td>
<td>{item.name}</td>
<td>{item.email}</td>
</tr>
))}
);
}
}
export default Statelist;
答案1
得分: 0
> items.map 不是一个函数
那么 items 不是一个数组。那它是什么呢？
它在这里被初始化为一个数组：
this.state = {
items: [],
DataisLoaded: false
};
但后来在这里被更新：
this.setState({
items: json,
DataisLoaded: true
});
这意味着 json 不是一个数组。那它是什么呢？
访问你代码中的 API URL，我看到的数据开头是：
{"status":"ok","totalResults":13394,"articles":[
（以此类推）
嗯，这不是一个数组。这是一个对象。也许你想要的是对象上的顶级 articles 属性，它包含一个数组吗？：
this.setState({
items: json.articles,
DataisLoaded: true
});
我不能确定，但你可以。你可以检查从 API 收到的数据结构，决定你想从那个结构中获取什么数据，以及如何使用那些数据。
至于 错误本身，你不能在一个对象上调用 .map()，只能在一个数组上调用。
英文:
> items.map is not a function
Then items is not an array. So what is it?
It's initialized as an array here:
this.state = {
items: [],
DataisLoaded: false
};
But later is updated here:
this.setState({
items: json,
DataisLoaded: true
});
Which means json is not an array. So what is it?
Visiting the API URL in your code, I see data starting with:
{"status":"ok","totalResults":13394,"articles":[
(and so on)
Well, that's not an array. It's an object. Perhaps you want that top-level articles property on the object, which contains an array?:
this.setState({
items: json.articles,
DataisLoaded: true
});
I can't know for certain, but you can. You can examine the structure of the data you're receiving from the API and decide what data you want from that structure and how you want to use that data.
As far as the error itself is concerned, you simply can't call .map() on an object, only on an array.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论