Я использую React и компонент Home возвращает мне ошибку, которую он говорит latestNews.slice is not a function
в моем случае latestNews - array проблема появилась, когда он заменит const latestNews = api.latest();
из-за условного const latestNews = (await this.props.query) ? api.busqueda() : api.latest();
это jsx home.
import React, { Component } from "react";
import Grid from "@material-ui/core/Grid";
import Skeleton from "react-loading-skeleton";
import Card from "../components/Card";
import api from "../utils/api";
import "./_home.scss";
class Home extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
latestNews: [],
searchQuery: ""
};
}
async componentDidMount() {
this.setState({ isLoading: true });
const latestNews = (await this.props.query) ? api.busqueda() : api.latest();
// this.props.query prop a home
//const latestNews = api.latest();
this.setState({ latestNews: latestNews.slice(0, 10), isLoading: false });
}
render() {
const { isLoading, latestNews } = this.state;
return (
<div>
<Grid
container
spacing={3}
align="center"
style={{ marginTop: "10px" }}
>
{isLoading &&
Array.from({ length: 10 }, (_, index) => (
<Grid item xs={12} lg={4} key={index}>
<Skeleton width={282} height={337} />
</Grid>
))}
{latestNews.length > 0 &&
latestNews.map(latestNew => (
<Grid item xs={12} lg={4} key={latestNew.news_id}>
<Card data={latestNew} />
</Grid>
))}
</Grid>
</div>
);
}
}
export default Home;
и это - то, что у меня есть в api
import dayjs from "dayjs";
const BASE_URL = "--->aqui--va--la--API_URL";
const getActualDate = () => dayjs().format("YYYY[-]MM[-]DD");
const api = {
latest: async (date = getActualDate()) => {
try {
const response = await fetch(`${BASE_URL}/latest/${date}`);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
},
category: async (categoryId = "") => {
try {
const response = await fetch(`${BASE_URL}/news/category/${categoryId}`);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
},
busqueda: async (searchId = "") => {
try {
const response = await fetch(`${BASE_URL}/news/busqueda/${searchId}`);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
};
export default api;
Ошибка должна состоять в том, что для, когда он становится setState, переменная latestNews не array и следовательно не считает определенной одну funciГіn slice, конечно по отношению к этой точке ты имеешь объект (незаконченное обещание).
Ты recomendarГ, - чтобы менять немного ее lГіgica для того, чтобы в API ты получил flag (this.props.query) и в зависимости от стоимости ты возвратил fetch, который применяется для того, чтобы ты смог использовать что-то asГ - с компонента.
api.metodo(this.props.query)
.then(res => res.json())
.then(res => {
this.setState({ latestNews: res.slice(0, 10), isLoading: false });
})