Discussion :

[haddocks]

Bonjour,

Tout d'abord je voudrais signaler que je suis débutant avec React.

Le code est une petite todolist d'un tuto.

Le probleme rencontré est que l'orsque je clique sur un élément de la liste, la propriété "done" devrait s'inverser entre false et true.
ça ne fonctionne pas lorsque je regarde le state du composant dans chrom.

Pour le moment l'erreur "Cannot convert undefined or null to object" n'apparait plus, mais ça ne fonctionne toujours pas.

le console.log renvoi bien l'objet cliqué mais le state ne se met pas à jour.
J'ai mi le code dans CodeSandbox:
https://codesandbox.io/s/interesting-tharp-ps558o

Est que vous voyez une erreur, ça devrait se situer dans la fonction markDone ?

le code:

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
49
50
51
52
53
import React, { Component } from 'react';
import './App.css';
 
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      heading: 'Shopping List',
      items: [
        { text: 'buy milk', done: false },
        { text: 'go to the dentiste', done: false },
        { text: 'Acheter pa', done: false },
      ],
    };
  }
 
  markDone = (todo) => {
    let todos = this.state.items.map((t) => {
      if (t.text === todo.text) {
        console.log(t);
        Object.assign({}, t, {
          done: !t.done,
        });
      }
      return t;
    });
    this.setState({ items: todos });
  };
 
  render() {
    return (
      <div className="container">
        <br />
        <div className="row">
          <div className="col-md-6 offset-3">
            <h1>{this.state.heading}</h1>
            <ul>
              {this.state.items.map((item) => (
                <li onClick={() => this.markDone(item)} key={item.text}>
                  {item.text}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    );
  }
}
 
export default App;
 
  },

mon json:

Code :

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

1
2
3
4
5
6
7
8
"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"

[-Nikopol-]

En essayant ceci ? :

Code :

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

1
2
3
4
markDone = (item) => {
    item.done = !item.done;
    console.log(item);
  };

[haddocks]

Non🤔🤕

[mathieu]

votre "objet.assign" ne modifie pas le tableau "todos".
regardez la différence dans la console en utilisant cela par exemple :

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
markDone = (todo) => {
 
    //console.log(this.state);
 
    let todos = this.state.items.map((t) => {
 
      if (t.text === todo.text) {
        t["done"] = !t["done"];
      }
 
      return t;
 
    });
 
    console.log(todos);
 
    this.setState({ items: todos });
 
  };

[-Nikopol-]

Non🤔🤕

Pourtant testé sur le codesandbox, ca fait le job

[haddocks]

votre "objet.assign" ne modifie pas le tableau "todos".
regardez la différence dans la console en utilisant cela par exemple :

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
markDone = (todo) => {
 
    //console.log(this.state);
 
    let todos = this.state.items.map((t) => {
 
      if (t.text === todo.text) {
        t["done"] = !t["done"];
      }
 
      return t;
 
    });
 
 
    console.log(todos);
 
    this.setState({ items: todos });
 
  };

Yes ! ça fonctionne merci Mathieu.
Si je résume avec la fonction map on fait une copie du state, puis on le modifie en modifiant l'objet don t.text === todo.text , puis on met à jour le state avec setstate. correct ?

Mais pourquoi à votre avis ça ne fonctionne pas avec le code du cours (voir photo au 1er post ) ?
Vraiment j'aimerais comprendre car c'est exactement le même code que j'avais fait...


-Nikopol- Désolé si je m'en suis pas sortie avec ta proposition. Comme la fonction map avait disparu, je n'ai pas dû bien adapter le code.

Merci à vous deux je vais pouvoir continuer.

[NoSmoking]

Bonjour,

Vraiment j'aimerais comprendre car c'est exactement le même code que j'avais fait...

Non, car tu n'utilises pas le résultat de Object.assign, il faut faire à minima un return que tu n'as pas mis.

-Nikopol- Désolé si je m'en suis pas sortie avec ta proposition. Comme la fonction map avait disparu, je n'ai pas dû bien adapter le code.

Pourtant c'est quand même la solution la plus concise, il te suffit de changer le contenu de la fonction markDone.

A quoi sert-il de récupérer et de parcourir la liste des éléments alors que l’élément cliqué est passé en paramètre !

Code :

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

1
2
3
4
markDone = (todo) => {
  todo.done = !todo.done;
  console.log(JSON.stringify(this.state.items, null, 2)); // si l'on veut se convaincre !
};

[mathieu]

je crois qu'il faut aussi rajouter "setState" ensuite

Code :

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

1
2
3
4
  markDone = (item) => {
    item.done = !item.done;
    this.setState(this.state);
  };

j'ai fait le test ici :
https://codesandbox.io/s/serene-hodgkin-u8xngz

[haddocks]

Encore merci pour toutes ces explications.