在 React 中向 DOM 添加新元素

Posted 2023-02-25

【中文标题】在 React 中向 DOM 添加新元素

【英文标题】：Add new element to DOM in React

【发布时间】：2021-02-18 04:13:17

【问题描述】：

我是 React 新手，我尝试在 onClick 时创建向 DOM 添加一个新元素。所以我和国家一起玩。如下：

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"

你能告诉我如何解决这个问题的正确方法吗？谢谢。

【问题讨论】：

setState 异步发生，因此您应该执行const newNumber = number + 1; setNumber(newNumber); setItem([...item, id: newNumber, task: "Task " + newNumber]); 之类的操作，以便获得您期望的值。

4 //数字的结果 那4是什么？是您将number 的初始状态设置为的吗？

@codemonkey 是的，这是状态 number

的结果

【参考方案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();