заносить в список информацию о Api с React, но только возвращает последнюю стоимость
Привет я использую react и api, созданный с Strapi, проблема, которая у меня есть сейчас, состоит в том, что я пробую принести данные api, действительно меня приносит информация с fetch, и когда я делаю одинокий .map, показывает мне последнюю стоимость, больше не список всего api.
Это код home, где читается api, и проходят данные в соответствующий компонент, как они могут видеть, я делаю fetch и выполняю функцию api Strapi, который getEntries, которые после я храню их в state и это перемещаю из-за props в соответствующий компонент которые.
import React, { useState, useEffect } from 'react'
import Header from '../components/Header'
import Slider from '../components/Slider'
import Services from '../components/Services'
import Projects from '../components/Projects'
import Footer from '../components/Footer'
import Strapi from 'strapi-sdk-javascript/build/main';
const strapi = new Strapi('http://localhost:1337');
const Home = () => {
const [service, setServices] = useState ();
const [project, setProjects] = useState ();
const [slider, setSliders] = useState ();
const [error, setError] = useState();
useEffect( () => {
if(service ===undefined ){
const Fetch = async () => {
try {
const gets = await strapi.getEntries("Services")
setServices(gets);
}
catch(err) {
alert(err);
}
}
Fetch();
}
if(project===undefined){
const Fetch = async () => {
try {
const getProject = await strapi.getEntries("Projects")
setProjects( getProject );
}
catch(err) {
alert(err);
}
}
Fetch();
}
if(slider===undefined){
const Fetch = async () => {
try {
const getSlider = await strapi.getEntries("Sliders")
setSliders( getSlider );
}
catch(err) {
alert(err);
}
}
Fetch();
}
});
return (
)
}
export default HomeСейчас мы можем видеть код компонента, где было бы нужно разворачивать все данные api, но только он показывает мне последнего. Здесь мы можем видеть, что я называю ресурс react, который является slider, который получает такие некие параметры как титул описание и изображение; поскольку ему удается видеть, я получаю props, которые я послал с home, и делаю .map данных, полученных с props и посылаю их state, чтобы после разворачивать их в каждом необходимом элементе.
import React, {useEffect, useState} from 'react'
import './styles/Projects.css'
import './styles/Carousel.css'
import Slider from 'react-animated-slider';
import 'react-animated-slider/build/horizontal.css';
import './styles/slider-animations.css';
const Projects = (props:any) => {
const [id,setId]= useState();
const [title, setTitle] = useState();
const [description, setDescription] = useState();
const [imgUrl, setImgUrl] = useState();
const [category, setCategory] = useState();
useEffect(() => {
if(props.project !== undefined){
props.project.map((data:any) => {
setId(data.id)
setTitle(data.title);
setDescription(data.description);
setCategory(data.services[0].title);
setImgUrl(data.image.url)
})
}
})
return (
Recent
work
{title}
{description}
)
}
export default ProjectsОн мне кажется очень редким, из-за которого уже я попробовал различные функции, чтобы тратить данные api, и не, как оставление, так как я также хочу занести в список меню каждого титула проектов, также присоединено, api для того, чтобы они увидели структуру:
В твоем компоненте Project в твоем effect ты распределяешь каждую стоимость в том же state:
useEffect(() => {
if(props.project !== undefined){
props.project.map((data:any) => {
setId(data.id)
setTitle(data.title);
setDescription(data.description);
setCategory(data.services[0].title);
setImgUrl(data.image.url)
})
}
})
например, каждый раз, когда ты повторяешь, выполняешь setId и настоящую стоимость ты распределяешь это id, именно поэтому всегда он показывает тебе только последнюю статью.
то, что ты мог бы делать, он состоит в том, чтобы повторять в составляющем отце твоего компонента Projects и в одиноком Projects покажи info используя props. Другой выбор состоял бы в том, чтобы вместо того, чтобы делать sets внутри лучшего map, ты сделал render там.
useEffect(() => {
if(props.project !== undefined){
props.project.map((data:any) => {
return (
<div>{data.title}</div>
...etc
)
})
}
})
-
1Я это попробовал делая render там самим в map, и смотри ошибку, которая выходит у меня сейчас. TypeScript ошибка in C:/xampp/htdocs/Code/web-algoritmo/src/pages/home.tsx (81,5): JSX element type ' void' is not в строителя function for JSX elements. TS2605 – Camilo Rodriguez 08.11.2019, 01:14