Вопросы Теги

заносить в список информацию о 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 для того, чтобы они увидели структуру:

introducir la descripción de la imagen aquí

0
задан 06.11.2019, 06:14
1 ответ

В твоем компоненте 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
            )
        })
    }
})
0
ответ дан 01.12.2019, 12:36
  • 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

Теги

Похожие вопросы