0
votes

Mettre à jour une valeur d'objet JSON lorsque vous cliquez sur dans React

J'ai suivi un tutoriel sur la mise à jour d'une valeur, cela increments la valeur lorsque l'utilisateur clique sur un bouton.

Mais, j'ai la valeur de l'objet JSON à mettre à jour. La valeur doit être mise à jour lorsque l'utilisateur clique sur un bouton et vice versa . Après avoir essayé d'implémenter en suivant l'exemple, cela n'a pas changé. Voici mon code:

1. onClick:

{
        "id": "fa1ca3c1-cc1e-4ed9-86b8-f60d8312d499",
        "author": "Neal Topham",
        "avatar": "http://lorempixel.com/100/100/people/1/",
        "date": "2017-02-08T00:30:05.552Z",
        "message": "Mungkin ada fenomena paranormal yang tidak bisa dijelaskan. Lebih baik nyala mati sendiri daripada tidak nyala sama sekali",
        "point": 3,
}

2. useState:

const [count, setCount] = useState(0);

3. comments.json:

<div>
  Point: {item.point}&emsp;
  <button onClick={() => setCount(item.point + 1)} class="btn"><i class="fa fa-arrow-up"></i></button>
  <button onClick={() => setCount(item.point - 1)} class="btn"><i class="fa fa-arrow-down"></i></button>
</div>

4. Lien du didacticiel:

https://reactjs.org/docs/hooks-state.html

javascript reactjs html json

1 commentaires

Un "objet JSON" n'existe pas

4 Réponses :

0
votes

Utilisez count au lieu de item.point .

<div>
  Point: {count}&emsp;
  <button onClick={() => setCount(item.point + 1)} class="btn"><i class="fa fa-arrow-up"></i></button>
  <button onClick={() => setCount(item.point - 1)} class="btn"><i class="fa fa-arrow-down"></i></button>
</div>

const [count, setCount] = useState(item.point);

0 commentaires

0
votes

Le problème est que vos écouteurs onClick mettent à jour la variable count pendant le rendu de item.point .

À ce stade, React restitue simplement la propriété point de l'objet item , qui n'est liée à aucune modification de la variable d'état de count .

En fonction de la logique de votre application, vous souhaiterez peut-être extraire l' item.point directement dans la variable count comme ceci:

const [count, setCount] = useState(item.point);

et rendre {count} au lieu de {item.point}

Cependant, cette approche ne fonctionnera que dans une direction, ce qui signifie que lorsque vous cliquez sur le bouton, la valeur rendue change, mais elle ne met pas à jour la propriété de point réelle de l'objet d' item

0 commentaires

1
votes

Vous aurez probablement besoin de votre objet pour vivre dans votre état dans votre cas.

useState

<div>
  Point: {message.point}&emsp;
  <button onClick={() => addCount(1)} class="btn"><i class="fa fa-arrow-up"></i></button>
  <button onClick={() => addCount(-1)} class="btn"><i class="fa fa-arrow-down"></i></button>
</div>

Vous ne pouvez pas muter une partie de l'état, vous en ferez donc une copie modifiée.

const addCount = (n) => {
  setMessage({
    ...message,
    point: message.point + n
  });
};

const [message, setMessage] = useState({
  "id": "fa1ca3c1-cc1e-4ed9-86b8-f60d8312d499",
  "author": "Neal Topham",
  "avatar": "http://lorempixel.com/100/100/people/1/",
  "date": "2017-02-08T00:30:05.552Z",
  "message": "Mungkin ada fenomena paranormal ...",
  "point": 3,
});

1 commentaires

L'objet JSON est dans le fichier comments.json

0
votes

1. useState:

<button
  onClick={() => {
   // first, clone it
    const newItems = [...items];
    newItems[idx] = {
      ...item,
      point: item.point + 1
    };
    setItems(newItems);
  }}
  className="btn-upvote"
>
  <i className="fa fa-arrow-up"></i>
</button>

 <button
  onClick={() => {
    // first, clone it
    const newItems = [...items];
    newItems[idx] = {
      ...item,
      point: item.point - 1
    };
    setItems(newItems);
  }}
  className="btn-downvote"
>
  <i className="fa fa-arrow-down"></i>
</button>

2. Bouton modifié:

const [items, setItems] = useState([]);

0 commentaires