react

Version imprimable

Bonsoir,

je fais uns site / exercice pour apprendre Symfony et ...plein d'autres choses
j'ai donc un peu de tout: du React, du twig, api plateForm...

Ma page d'accueil contient la div pour intégrer la partie gérée par React
C'est le seul endroit où je fais du React... c'est pas génial, il aurait fallu le faire pour tout le site , mais je voulais apprendre à me servir de tout et j'ai donc fais des pages en Twig

Viens le moment où une modale ( toujours dans les composants react ) demande de se connecter pour continuer.
Alors je clique sur un lien qui contient le route /login de Symfony. je peux alors me connecter. Puis je suis redirigé vers la page d'accueil,
qui affiche une liste de Card et un formulaire de recherche.

Pour l'instant , donc il n'y a pas de problèmes, sauf que:
avant de me connecter , j'étais sur une card ( celle que j'avais choisi dans la page d'accueil ) et je souhaiterais être redirigé sur cette card !

Ce n'est pas forcément impossible, après réflexion:

Code:

ReactDOM.render(<HelloApp />, document.getElementById("root"))

Si j'arrive à renseigner l'id de la card dans ce composant, j'arrive directement sur ma card !

Dans mon react:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react' const Modale = ({hide, visible, animalId}) => { const idTab = animalId.split('/') const url = '/login/' + idTab[idTab.length - 1] return (visible && <div className='bg-warning'> <h1>vou devez vous connecter pour faire cette opération</h1> <a href={url}>Se connecter</a> <div onClick={hide}>x</div> </div>) } export default Modale
J'ai réussi à renvoyé l'id de ma card du coup ( en modifiant des routes et render... tout un programme) :
Code:

1 2 3 4 5 6 7 8 9 if (document.getElementById("root")) { const id = parseInt(document.getElementById('root').dataset.id, 10) if (id === 0) { ReactDOM.render(<HelloApp />, document.getElementById("root")) } else { ReactDOM.render(<HelloApp id={id}/>, document.getElementById("root")) } }
Et je reviens donc sur ma card que j'avais quittée...:applo:
Avec une erreur en console:

Citation:

Can't perform a React state update on an unmounted component.

Je soupçonne un problème avec la modale que j'ai quittée pour me connecter... mais j'avoue ne pas comprendre

Laurent.

Alors j'ai avancé sur mon erreur et je crois savoir pourquoi !
Code:

1 2 3 4 5 6 7 8 9 if (document.getElementById("root")) { const id = parseInt(document.getElementById('root').dataset.id, 10) if (id === 0) { ReactDOM.render(<HelloApp />, document.getElementById("root")) } else { ReactDOM.render(<HelloApp id={id}/>, document.getElementById("root")) } }
Du coup, puisque je récupère bien un id alors je vais monter le composant <HelloApp id={id} />
Puis le rendu de <HelloApp id={id} />:
Code:

1 2 3 4 5 6 7 render() { return <div> {this.state.onlyOne && <AnimalCard animalId={this.state.animalId}/>} {!this.state.onlyOne && <FormResearch wantName={this.handleIfJustName} onResult={this.handleResult}/>} {!this.state.onlyOne && <CardList wantOneAnimal={this.handleOneAnimal} url={this.state.url} />} </div> }
Je vais monter tout ça avec dans le composant <CardList />:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 findAnimalList = (url) => { fetch(url) .then( response => { return response.json() } ) .then( resp => { this.setState({ animalList: resp["hydra:member"], animalsNumber: resp["hydra:totalItems"], view: resp["hydra:view"], }) }) } componentDidMount() { this.findAnimalList(this.state.url) }
Je fais un fetch sur l'api pour récupérer une liste d'animaux

Mais pendant ce temps sur mon <HelloApp id={id} />:
Code:

1 2 3 4 5 6 7 8 componentDidMount() { if (this.props.id) { this.setState({ animalId: '/api/animals/' + this.props.id, onlyOne: true }) } }
Ce qui provoque un nouveau rendu et un démontage du composant <CardList /> alors qu'il n'a pas fini de récupérer la liste.
Et affichage de l'erreur comme quoi , on ne peut pas mettre à jour un composant démonté !!

En espérant que j'ai bien compris.

Dans la documentation de React, on donne l'exemple du timer que je comprends bien, mais dans mon cas , je dois arrêter un fetch
Et mon niveau ne me permet pas de savoir quoi mettre dans le componentWillUnmount(), vraiment aucune idée...
Si je pouvais avoir une idée de la marche à suivre pour parvenir à mes fins,
merci

Laurent.

04/02/2022, 20h35
-Nikopol-
tu es avec les hook ou avec les classes ? faire cohbiter les deux n'est pas forcement une bonne idée (maintenabilité, cohérence toussa toussa...)
pour les hook il te faut un
Code:

1 2 3 useEffect(()=>{ //setMyvar(...) },[myVar]);
ce qui aura pour effet de ne mettre à jour ton state qu'une fois

En fait , j'ai commencé react avec des classes ( parce que les tutos sur react commencent avec les classes ) puis je suis passé aux hooks ...!
Donc j'ai des composants fonctionnels et des composants de classe, c'est à cause de l'évolution de mes connaissances en React.

Je me rends compte que j'ai deux composants qui font des requêtes et qui sont démontés avant la fin de leurs requêtes.

Pour un composant fonctionnel ou de classe , je vais utiliser dans les deux cas l'objet AbortController
Je commence par le composant de classe je déclare:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const controller = new AbortController()
const signal = controller.signal
 
class CardList extends React.Component
{
    constructor(props) {
        super(props)
        this.state  = {
            ...init
        }
    }
 
    findAnimalList = async (url) => {
        console.log('je fais le fetch')
        const response = await fetch(url, {signal})
        const rep = await response.json()
        this.setState({
            animalList: rep["hydra:member"],
            animalsNumber: rep["hydra:totalItems"],
            view: rep["hydra:view"]
        })
    }

puis dans le componentWillUnmount:

Code:

1
2
3
componentWillUnmount() {
        controller.abort()
    }

Et ça fonctionne !

Dans mon composant fonctionnel le problème se situe dans le useEffetc:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
for (const select of inputFields["select"]) {
        useEffect ( () => {
            fetch('api/' + select["table"])
            .then( response => response.json())
            .then( 
                result => {
                    setOptions( state => ({...state, [select["primaryEntity"]]: extractDatasSelect(result["hydra:member"])}))
                },
                error => setError(error)
                )
        }, [])
    }

Au passage , faut-il faire un for avec un useEffect à l'intérieur ou un useEffect avec un for ... ?

Ensuite, il suffirait de déclarer un const controller= useRef( new AbortController() )
Puis un

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
for (const select of inputFields["select"]) {
        useEffect ( () => {
            fetch('api/' + select["table"], {signal: controller.current.signal})
            .then( response => response.json())
            .then( 
                result => {
                    setOptions( state => ({...state, [select["primaryEntity"]]: extractDatasSelect(result["hydra:member"])}))
                },
                error => setError(error)
                )
        }, [])
    }
 
 useEffect ( () => () => controller.current.abort(), [])

Du coup, je ferais plutôt un for avec un useEffect à l'intérieur.
Mais ça ne fonctionne pas!

La solution ne doit pas être loin !

Bonjour, je vais poser la question plus simplement:
dans un script React du genre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
for (const select of inputFields["select"]) {
        useEffect ( () => {
            fetch('api/' + select["table"])
            .then( response => response.json())
            .then( 
                result => {
                    setOptions( state => ({...state, [select["primaryEntity"]]: extractDatasSelect(result["hydra:member"])}))
                },
                error => setError(error)
                )
        }, [])
    }

comment intégrer l'objet new AbortController() pour stoper les requêtes en cours ???