如何在 React 中的 object 內的數組中添加 object？

Question

我正在嘗試僅在“待辦事項”類別中插入具有多個字段（如標題、文本和標簽）的任務。 它將是一個 object 在一個數組內，在一個 object 內。 我實現它的方式是完全錯誤的，它在另一個 object 中生成了一系列對象。 我怎樣才能使數據看起來與表中的相同？

這是我需要保存數據的方式：

const Table = [
  {
    id: uuidv4(),
    title: "To do",
    tasks: [
      {
        id: uuidv4(),
        title: "Learn JavaScript",
        text: "lorem ipsum",
        tag: "tag1",
      },
      {
        id: uuidv4(),
        title: "Learn Git",
        text: "lorem ipsum",
        tag: "tag2",
      },
    ],
  },
  {
    id: uuidv4(),
    title: "Doing",
    tasks: [
      {
        id: uuidv4(),
        title: "Learn CSS",
        text: "lorem ipsum",
        tag: "tag1",
      },
    ],
  },
  {
    id: uuidv4(),
    title: "Done",
    tasks: [
      {
        id: uuidv4(),
        title: "Learn HTML",
        text: "lorem ipsum",
        tag: "tag1",
      },
    ],
  },
];

這是我制作的代碼

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

const App = () => {
  const [tasks, setTasks] = useState([]);
  function addTask(task) {
    const newTask = { ...task };
    newTask[0] = {
      ...tasks[0],
      arrayTasks: task,
    };
    setTasks([...tasks, newTask]);
  }
  return (
    <div>
      <Input onAdd={addTask} />
    </div>
  );
};

export default App;

和這個：

import { useState } from "react";

const Input = ({ onAdd }) => {
  const [title, setTitle] = useState("");
  const [text, setText] = useState("");
  const [tag, setTag] = useState("");
  const [status, setStatus] = useState("ToDo");

  const onSubmit = (e) => {
    e.preventDefault();

    if (!text || !title) {
      alert("Please enter a task with a title");
      return;
    }
    const number = Math.floor(Math.random() * 10000) + 1;
    const id = "" + number;
    onAdd({ title, text, tag, status, id });
    setTitle("");
    setText("");
    setTag("");
    setStatus("ToDo");
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Add Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <input
        type="text"
        placeholder="Add Task"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <input
        type="text"
        placeholder="Insert you tag"
        value={tag}
        onChange={(e) => setTag(e.target.value)}
      />
      <button type="submit" onClick={onSubmit}>
        Save Task
      </button>
    </div>
  );
};

export default Input;

這是 output

Answer 1

如果您希望您的任務 state 像表格數組一樣。 所以我認為您需要首先參考要更新的數組中的哪個項目。 所以我建議您需要將一個額外的參數傳遞給 function 'id of the target item or row' 。

所以，你可以嘗試這樣的事情。

// the second param is the id of target row or item which contain the tasks obj.

function addTask(task, id) {
    const tasksCopy = [...tasks]; // should be a copy of table variable

    const targetObjIndex = tasksCopy.findIndex((tbl) => tbl.id === id);
    const resetOfTheArray = tasksCopy.filter((tbl) => tbl.id !== id);

    let targetItem = tasksCopy[targetObjIndex];

    targetItem = { ...targetItem, tasks: [...targetItem.tasks, task] };

  return [...resetOfTheArray, targetItem];
}