在 React 中向 DOM 添加新元素

Question

我是 React 的新手，我嘗試在 onClick 時創建向 DOM 添加新元素。所以我玩 state。如下所示：

const [number, setNumber] = useState(1);
const [item, setItem] = useState(() => [{id: number,task: `Task ${number}`}]);

const increaseItem = () => {
    setNumber(number + 1)
    console.log(number)
    setItem([...item, {id: number, task: `Task ${number}`}])
    console.log(item)
}

但是當我在 useState 中推送數組時出現問題，數組的第一個元素被復制了兩次。 這是數組的結果：

4 //result of the number

/* Result of item */
0: {id: 1, task: "Task 1"}
1: {id: 1, task: "Task 1"}
2: {id: 2, task: "Task 2"}
3: {id: 3, task: "Task 3"}

你能告訴我如何解決這個問題的正確方法嗎？ 謝謝你。

Answer 1

const [number, setNumber] = useState(1);
const [item, setItem] = useState([{
    id: number,
    task: `Task ${number}`
}]);

const increaseItem = () => {
    const newNumber = number + 1;
    setNumber(newNumber);
    console.log(number)
    setItem([...item, {
        id: newNumber,
        task: "Task " + newNumber
    }]);
    console.log(item)
}

increaseItem();