Как исправить «TypeError: items.map не является функцией» при работе с React и API?
Я новичок в React и пытаюсь получить некоторую информацию из API, но продолжаю получать эту ошибку при использовании функции .map для передачи полученных данных в массив:
TypeError: items.map is not a function.
Я не очень хорошо знаком с JavaScript, поэтому не совсем понимаю, что здесь происходит. Я включил свой код:
import React, { Component } from "react";
import "./App.css";
class App extends Component {
constructor() {
super();
this.state = {
items: [],
isLoaded: true
};
}
componentDidMount() {
fetch("http://www.colr.org/json/colors/random/7")
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
items: json
});
});
}
render() {
var { items, isLoaded } = this.state;
var itemInfo = items.map(item => (
<div key = {item.colors.id}>Hex:{item.colors.hex}</div>
));
if (!isLoaded) {
return <div>{itemInfo}</div>;
} else {
return <div className = "App">{itemInfo}</div>;
}
}
}
export default App;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Поскольку вы не указываете типы ни для чего и не очень ясно (даже для человека-читателя), что items является Array, вы должны явно указать TypeScript использовать его как массив.
Вы используете Утверждение типа для этой цели. Должно быть что-то вроде:
(items as Array<YourArrayElementType>).map(/* .. */);
Однако рекомендуется всегда явно указывать тип всего, что вы объявляете. Таким образом, все в вашей кодовой базе будет статически типизировано. Для всего, что приходит извне (например, запросы API), вы должны привести информацию к определяемому вами interfaceс.
Поскольку массив items в состоянии изначально является пустым массивом, вы получаете эту ошибку, когда изменяете items на что-то, что не является массивом.
Глядя на ответ API на ваш вопрос, вы получите объект из своего JSON после его анализа. Массив, который вы хотите использовать в ответе, находится под свойством colors, и каждый элемент в этом массиве имеет свойства id и hex.
class App extends Component {
// ...
componentDidMount() {
fetch("http://www.colr.org/json/colors/random/7")
.then(res => res.json())
.then(res => {
this.setState({
isLoaded: true,
items: res.colors
});
});
}
render() {
var { items, isLoaded } = this.state;
var itemInfo = items.map(item => <div key = {item.id}>Hex:{item.hex}</div>);
// ...
}
}
Толле абсолютно прав в отношении вашей конкретной проблемы... Я бы еще больше очистил ваш код следующим образом:
import React, { Component } from 'react';
class App extends Component {
state = { items: [], isLoading: true, error: null };
componentDidMount() {
fetch('http://www.colr.org/json/colors/random/7')
.then(res => res.json())
.then(json => {
this.setState({
isLoading: false,
items: json.colors,
});
})
.catch(error =>
this.setState({ error: error.message, isLoading: false }),
);
}
renderColors = () => {
const { items, isLoading, error } = this.state;
if (error) {
return <div>{error}</div>;
}
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
{items.map(item => (
<div key = {item.id}>Hex: {item.hex}</div>
))}
</div>
);
};
render() {
return <div>{this.renderColors()}</div>;
}
}
export default App;