透過鍵值對將數組填充

Question

我正在嘗試用物件填充一個陣列。如果我執行setState，新的條目不會被添加，但是數組的結構會被擴展。例如：初始條目（0），新條目（0->0），另一個條目（0->0->0）。然而，我希望每個條目都有一個連續編號。

const [entrys, setEntrys] = useState([{ date: "", entry: "" }]);
->點擊按鈕
setEntrys((prev) => [{ ...prev, date: clickedDay, entry: hinweis }]);

Answer 1

你遇到的問題是你在傳遞的物件中使用了先前的狀態，例如使用了擴充運算子"prev"。

你想要做的是在儲存到狀態的新物件中包含先前的狀態，例如"prev"作為陣列中的一個單獨元素 - 如下所示。

我還提供了一個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;