I'm trying to put api data in a slide, but there is a problem

Question

App.js

import { Component } from 'react'
import Header from './components/Header'
import Slide from './components/Slide'
import Body from './components/Body'
import Footer from './components/Footer'
import './App.css'
import axios from 'axios'

export default class App extends Component {

  constructor(props){
    super(props);
    this.state={
      movieObj:[] //State to put the received API data
    }
  }


  getMovies=async()=>{
    //화살표함수
      await axios({
      method:'get',
      url:'/v1/search/movie.json?query="스파이더맨"&display=6',
      dataType:'json',
      headers:{
        "X-Naver-Client-Id":'pcSk4iqo1SpsvR7nh1Ul',
        "X-Naver-Client-Secret":'g8wy7q0lQ7'
      }
    })
    .then(response => 
      {
        console.log(response);
        console.log(response.data.items);
        this.setState({
          movieObj:response.data.items
        })
      }
    )
  }

  componentDidMount(){
    this.getMovies()//호출
  }


  render() {
    console.log(this.state.movieObj)
    console.log(1)
    return (
      <div id="app">
        <Header></Header>
        <Slide  list={this.state.movieObj}></Slide>//Passing api data to sub-component Slide
        <Body></Body>
        <Footer></Footer>
      </div>
    )
  }
}

Slide.js

import {Component} from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay, A11y } from 'swiper';
import '../css/slide.css'


// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';  

export default class Slide extends Component {
  constructor(props){
    super(props);
    this.state={
      slideObj:this.props.list//State to receive (this.props.list) from App.js
    }
  }

  render() {
    console.log(this.state.slideObj)
    return (
        <Swiper id="slide"
            modules={[Navigation, Pagination, Autoplay, A11y]}
            spaceBetween={50}
            slidesPerView={4}
            loop= {true}
            //dir="ltr"//슬라이드 진행방향 전환.. 
            navigation// prev,next
            autoplay={{delay: 2000, disableOnInteraction:false}}
            pagination={{ clickable: true }}
            onSlideChange={() => console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
            >
            <SwiperSlide className="item">
                <div id='movieInfo'>
                    Slide1
                </div>
            </SwiperSlide>
            <SwiperSlide className="item">Slide 2</SwiperSlide>
            <SwiperSlide className="item">Slide 3</SwiperSlide>
            <SwiperSlide className="item">Slide 4</SwiperSlide>
            <SwiperSlide className="item">Slide 5</SwiperSlide>
            <SwiperSlide className="item">Slide 6</SwiperSlide>
        </Swiper>
    )
  }
}

I tried to put an api image inside a slide. Before putting image inside a slide, I checked whether the data received by axios is properly passed. but an empty array was output as a result of sending it to the subcomponent. [App.js - movieObj] (props)-> [Slide.js - slideObj]

How can I pass the apidata received from the parent component to the subcomponent? The help of the seniors is desperately needed. TT

I believe you have to add an `onUpdate` method on the parent component in order to propagate its state changes, as in `onUpdate (movieObj) { this.setState({ movieObj }) }`? Taken from [this question](https://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements). — Moa, Sep 16 '22 at 13:18
@Moa render Even if you put the code mentioned below and run it, only an empty array is output. — MellDaM, Sep 17 '22 at 07:05
What does `console.log(response.data.items)` prints on the console? — Moa, Sep 17 '22 at 13:25
@Moa The data received from the api request is displayed. → console.log result (6) [{…}, {…}, {…}, {…}, {…}, {…}] 0 : { title : spiderman, link :https://movie.naver.com/movie~ ,image : {imageLink} ... } ~ 6 : { title:{movieName}, link : {movieSite}, image : {imageLink} ... } — MellDaM, Sep 17 '22 at 15:30
@Moa In the code above, I set the path to send the api request to the proxy in the package.json file. like this.. "proxy":"https://openapi.naver.com", in package.json file — MellDaM, Sep 17 '22 at 15:33

Moa · Accepted Answer · 2022-09-18T17:01:05.357

I guess you've forgotten to add an <img /> element on each SwiperSlide.

To dynamically render the images retrieved from the API request, we'll have to map (or loop) through the this.state.slideObj array so we can populate attributes such as id, src and alt with data returned from getMovies().

I've omitted bits of code to keep it nimble:

export default class Slide extends Component {
  constructor(props) {
    super(props)
    this.state = {
      slideObj: this.props.list,
    }
  }

  render() {
    return (
      <Swiper id="slide" ... >
        {this.state.slideObj.map(data => (
          <SwiperSlide className="item">
            <img src={data.image.imageLink} alt={data.title} />
          </SwiperSlide>
        ))}
      </Swiper>
    )
  }
}

Let me know how it goes?

Cheers

Thank you very much for your reply. Thanks to you, the webpage behaves the way you want it to. I learned a lot. — MellDaM, Sep 17 '22 at 16:36

I'm trying to put api data in a slide, but there is a problem

1 Answers1