[preact] Récupération entre 2 components

leknoppix
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'ai 2 components, un qui récupère une liste de film et l'autre qui, devrait se charger de les afficher.
component 1: OnlineSearchFilm

import {h, Component } from 'preact'
import Renderer from '../renderer'

export default class OnlineSearch extends Component {

    constructor (props){
        super(props)
        this.state = {
            apikey: "d5569bc7cc598eb82bcdffffd0f6ab84",
            lang: "fr-FR",
            link: "https://api.themoviedb.org/3/search/movie?api_key=**apikey**&language=**lang**&query=**search**&page=1&include_adult=false",
            urlrequest: '',
            oldsearch: '',
            resultdata: ''
        }
    }

    render (props) {
        return <div>
            Film Recherché: { props.search }<br />
            <Renderer data={ this.state.resultdata } />
        </div>
    }

    componentDidMount(){
        this.setState({urlrequest:  this.state.link.replace('**apikey**', this.state.apikey).replace('**lang**', this.state.lang) })
    }

    componentDidUpdate(props){
            if(props.search != "" && props.search.length >= 3){
                if(props.search != this.state.oldsearch) {
                    let url = this.state.urlrequest.replace('**search**', encodeURI(props.search))
                    let request = new XMLHttpRequest()
                    request.open('GET', url, true)
                    request.onload = () => {
                        if (request.status >= 200 && request.status < 400) {
                            let data = JSON.parse(request.responseText)
                            let num = 0
                            if (data.total_results == 0)
                            {
                                alert('Film introuvable')
                            }
                            else
                            {
                                this.parsing(data)
                            }
                        } else {
                            alert('Impossible de charger la liste')
                        }
                    }
                    request.onerror = function () {
                        alert('Impossible de charger la liste')
                    }
                    request.send()
                    this.setState({oldsearch:  props.search })
                }  
            }
    }

    parsing(data){
        let result = []
        data.results.forEach(movie => {
            result.push({
                id_film: movie.id,
                title: movie.title,
                year: movie.release_date,
                poster: movie.poster_path,
                resume: movie.overview
            })
        });
        console.log(result) //renvoi un json
        this.setState({resultdata:  result})
    }
}

component 2: Renderer

import {h, Component } from 'preact'

export default class Renderer extends Component {

    constructor (props){
        super(props)

    }

    render (props) {
        console.log('render chargé')
       return <div>{ props.data }</div>
    }

}

Ce que je veux

Je souhaiterais récupérer le résultat de ma recherche (via onlineSearchFilm) afin de réaliser un traitement et affichage.

Ce que j'obtiens

Je n'ai pas retour. Je pense que je dois avoir un soucis lorsque je récupère le contenu entre ma fonction "parsing" et le state.

Voyez vous mon erreur? Pourriez-vous expliquer ce que je fais de mal.

Amicalement
leknoppix

Aucune réponse