[英]Add new element to DOM in React
I'm new to React, I try to create add a new element to DOM when onClick. So I play with the state. Like below:我是 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)
}
But I got an issue when I push the array in useState, the first element of the array copied twice.但是当我在 useState 中推送数组时出现问题,数组的第一个元素被复制了两次。 Here the result of the array:
这是数组的结果:
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"}
Could you show me how the correct way to solve this.你能告诉我如何解决这个问题的正确方法吗? Thank you.
谢谢你。
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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.