From 28e7645b7eefa6b9472fb73dc6075c8c4f06aa39 Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Thu, 25 Jan 2024 09:16:10 +0100
Subject: [PATCH] =?UTF-8?q?useEffect=20hook=20=C3=A0=20la=20cr=C3=A9ation?=
=?UTF-8?q?=20du=20composant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 2 +-
src/components/person.component.jsx | 8 +++++++-
src/components/personListing.component.jsx | 2 +-
3 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
index 60abf01..356a1ef 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ où `tag` peut prendre comme valeur :
* `v5.3` : modification et état courant : utilisation d'une fonction en argument de `setOn` pour modifier l'état à partir de la valeur précédente
voir `/src/components/star.jsx` (et `/src/components/person.component.jsx`)
* `v5.5` : cycle de vie du composant : utilisation du hook `useEffect` pour agir au moment de la création du composant : juste après le premier rendu.
- voir `/src/components/personListing.jsx`
+ voir `/src/components/personListing.component.jsx` ainsi que `/src/components/person.component.jsx`
Faire ```git checkout main``` pour revenir à la version finale.
diff --git a/src/components/person.component.jsx b/src/components/person.component.jsx
index 10ffabc..079ef8f 100644
--- a/src/components/person.component.jsx
+++ b/src/components/person.component.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
// import stysheet defining style specific to this component
import '../assets/style/person.css';
@@ -11,6 +11,12 @@ const Person = ( { name = 'Anonymous', age, started, delay } ) => {
const [ currentAge, setCurrentAge ] = useState(age);
+ useEffect( () => {
+ if (started) {
+ setInterval( () => setCurrentAge( previousCurrentAge => previousCurrentAge + 1 ), delay);
+ }
+ }, []);
+
return (
<div className="person">Here is :
<div>name : <span>{ name }</span> </div>
diff --git a/src/components/personListing.component.jsx b/src/components/personListing.component.jsx
index 724d612..74b6c02 100644
--- a/src/components/personListing.component.jsx
+++ b/src/components/personListing.component.jsx
@@ -16,7 +16,7 @@ const PersonListing = props => {
useEffect( () => {
console.log('component did mount');
const fetchData = async () => {
- const data = await mockFetch('http://source.of.data/persons',1000);
+ const data = await mockFetch('http://source.of.data/persons');
setPersons( data );
}
fetchData();
--
GitLab