ReactJS中useState钩子的基本实现示例

我们知道，useState钩子用于管理ReactJs中功能组件内的状态

因此，出于学习目的，我实现了useState钩子的示例（下面给出了代码片段），其中我获取了一个具有一些初始值的数组，我需要更新该数组，并在每次单击按钮时在浏览器中显示整个更新的数组。我尝试了下面的代码片段，但没有得到预期的结果

问题：当我第一次单击按钮时，它将在数组中添加新元素，但在单击按钮两次或更多次后，它仅覆盖最后一个元素

预期结果：应在数组中添加新元素，而不是覆盖数组中的最后一个元素

在这个例子中，我肯定遗漏了useState钩子的任何逻辑或重要概念。请帮助我了解更多关于react钩子的信息

const{useState}=React；
常量示例=（）=>{
常量数组=[1,2,3]；
const[newArray，setNewArray]=useState（数组）；
const[newElement，setElement]=useState（数组[array.length-1]）；
常量车把=（）=>{
setElement（prev=>prev+1）；
setNewArray（[…数组，newElement]）；
}
常量映射=newArray.map（元素=>
编号{element}
）
返回(

{映射}

添加
);
};
ReactDOM.render(
,
document.getElementById（“react”）
);
使用状态
newArray
而不是
array
实现
map
<代码>数组

将在每次渲染时重新初始化为

[1,2,3]

。实际上，您应该将

数组

常量移到组件之外

const{useState}=React；
常量数组=[1,2,3]；
常量示例=（）=>{
const[newArray，setNewArray]=useState（数组）；
const[newElement，setElement]=useState（数组[array.length-1]+1）；
常量车把=（）=>{
setElement（prev=>prev+1）；
setNewArray（[…newArray，newElement]）；
}
常量映射=newArray.map（元素=>
编号{element}
）
返回(

{映射}

添加
);
};
ReactDOM.render(
,
document.getElementById（“react”）
);

谢谢，你能解释一下之前发生的事情吗？所以下次我会意识到有些东西放错地方了。是的，问题主要是关于你的
setNewArray（[…array，newElement]）这句话。每次重新渲染时，React都会遍历整个组件，因此
数组
会再次初始化回
[1,2,3]
。因此，当您调用该
setNewArray
-每次调用它时，它都会这样做：
setNewArray（[1,2,3，newElement]）。。。与使用状态时相比，该值不会在每次组件重新渲染时重新斜体化，只有在调用
useState
时才会初始化，因此状态值将保留在渲染器上是的，我现在清楚地了解了以前发生的事情。毫无疑问，为什么在这里添加+1
useState（array[array.length-1]+1）？哦，好的，你的
数组是
[1,2,3]
。因此
数组[array.length-1]
=3。但是当您附加到列表中时，您不希望附加3，因为这将发生-->
[1,2,3,3]
。您想添加4。这就是
array[array.length-1]+1