Erreur avec Object assign: Cannot convert undefined or null to object

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

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

Le code est une petite todolist d'un tuto.
Pièce jointe 621399
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:

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:

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"

En essayant ceci ? :

Code:

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

25/06/2022, 17h02
haddocks

Non🤔🤕

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

Code:

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 });
 
  };

25/06/2022, 19h54
-Nikopol-

Citation:

Envoyé par haddocks

Non🤔🤕

Pourtant testé sur le codesandbox, ca fait le job

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

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.

27/06/2022, 17h55
NoSmoking
Bonjour,

Citation:

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.

Citation:

-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:

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 ! };
27/06/2022, 18h04
mathieu
je crois qu'il faut aussi rajouter "setState" ensuite
Code:

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
01/07/2022, 13h03
haddocks

Encore merci pour toutes ces explications.