Remplissez un tableau avec des paires clé-valeur

Question

J'essaie de remplir un tableau avec des objets. Si j'exécute setState, les nouvelles entrées ne sont pas ajoutées, mais la structure du tableau est développée. Par exemple : entrée initiale (0), nouvelle entrée (0->0), une autre entrée (0->0->0). Cependant, j'aimerais que chaque entrée ait un numéro consécutif.

const [entrys, setEntrys] = useState([{ date : "", entrée : "" }]);
-> Cliquez sur le bouton
setEntrys((prev) => [{ ...prev, date : clickedDay, entrée : hinweis }]);

Answer 1

Le problème que vous rencontrez est que vous utilisez un état précédent dans l'objet que vous transmettez, par exemple en utilisant l'opérateur de propagation "prev".

Ce que vous voulez faire, c'est inclure l'état précédent dans le nouvel objet enregistré dans l'état, par exemple "prev" en tant qu'élément distinct dans le tableau - comme ci-dessous.

Je vous fournis également une codesandbox https://codesandbox.io/s/romantic-solomon-l566yy?file=/src/App.js.

import "./styles.css";
import React, { useState } from "react";

const App = () => {
  const [entries, setEntries] = useState([
    {
      date: "",
      text: ""
    }
  ]);

  const handleClick = () => {
    setEntries((prevEntry) => {
      return [...prevEntry, { date: "date", text: "test" }];
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
};

export default App;