Discussion :

[chrisyk22]

Bonsoir. je suis sur une fonctionnalité d'un site que je veux créer (j'en suis encore au maquette mais ça avance) avec REACT ET PHP/MYSQL et là je bloque sur un truc.
Je récupère des données via un appel ajax (XMLHttpRequest) dépuis une base de données mysql (une base de test bien-sur) et tout ce se passe bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React, { Component } from "react";
 
class Requete extends Component {
 
    constructor (props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.val = React.createRef()
    }
 
    componentDidMount () {
 
        const req = new XMLHttpRequest()
 
        req.open('GET', 'http://localhost/tests/test-post.php')
 
        req.onload = function () {
            const result = JSON.parse(req.responseText)
            const messages = result.map(function(message) {
                return `
                        <div className="message">
                            <span>${message.date_modif.substring(11, 16)}</span>
                            <span>${message.pseudo}</span>
                            <span>${message.messag}</span>
                        </>
                `
            }).join('')
            document.querySelector('#messages').innerHTML = messages
            // this.val.current.value = messages
        }
        req.send()
    }
 
    handleClick () {
        this.val.current.value = 'test'
        console.log(this.val.current.value)
    }
 
    render () {
        return (
            <div id='messages' ref={this.val}>
                <button onClick={this.handleClick}>Tester</button>
            </div>
        )
    }
 
}
export default Requete

Le problème est que je manipule directement le DOM dans ma fonction componentDidMount parce-que je n'arrive à utiliser la variable messages hors de la fonction dans laquelle je traite les données récupérés ce qui m'oblige à faire un querySelector et modifier les DOM sans passé par REACT. j'ai vu un tuto qui parlais des ref et j'ai essayer d'utiliser cette notion (la partie de code commenté et la fonction de test handleClick en sont la preuve) mais toujours rien. Bon bien-sur mon code il marche bien (je sais in touche pas à un code qui marche) j'aimerais vraiment pouvoir récupérer cette variable messages pour pouvoir l'integrer directement dans ma fonction render.
Merci d'avance pour votre aide

[gwyohm]

hello,
il faut utiliser le state de ton composant pour que le composant se mette à jour graphiquement. En passant par le state, react détectera des changements est fera un refresh.

[chrisyk22]

J'ai déjà essayé avec le State et modifier avec la fonction setState mais le problème viens (je pense) du fais que ma variable messages est déclaré dans une fonction à l'intérieur d'une fonction (un peu comme un callback) et de fais ne peux être exploité en dehors. Lorsque j'utilise le State si je l'appelle dans la fonction du onload REACT me dit que setState n'est pas défini même avec le bind(this).
Si t'a d'autres propositions je suis preneur

[gwyohm]

il faut que tu bind ta fonction onload à ton composant
ou alors tu passes par une arrow function :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
// le scope de ton composant
req.onload = () => {
// en utilisant une arrow, tu restes dans le même scope :
//celui du composant, tu à accès à this.setState
}

je te recommandé quand même de t'intéresser aux "hooks", les apis que propose react sont certes un peu plus compliquées à appréhender, mais parmi bien d'autres avantages, elles éliminent ces problèmes de scope

[chrisyk22]

Thanks dude. J'ai utilisé un Arrow et ça passe
Par contre le rendu c'est du HTML mais ça affiche une string contenant ce HTML sans que le navigateur puisse le lire. T'aurais une idée de comment je pourrais régler ça ?

[gwyohm]

T'aurais une idée de comment je pourrais régler ça ?

Sans voir ton code actuel, non. Je suppose que tu fais toujours un map sur des données qui te renvoie une string. Ou bien c'est ce que tu lis dans mysql qui contient du html ?