Javascript 在ReactJS中动态添加/删除下拉列表

我根据数组的索引动态添加和删除下拉列表。我正在使用设置索引。当添加或删除下拉列表时，我会递增或递减该索引。目标是一个如下所示的数组：

[
{索引：0，键入：“facebook”}，
{索引：1，键入：“instagram”}
]

问题是，当我添加一个新的下拉列表时，索引会增加2或3，而不是1，从而产生以下输出

[
{索引：0，键入：“facebook”}，
{索引：2，键入：“instagram”}
]

以下是我的组件的代码：

类SocialProfileComponent扩展组件{
建造师（道具）{
超级（道具）；
设指数=0；
此.state={
选项：[
{值：'email'，标签：'email'}，
{值：'instagram'，标签：'instagram'}，
{值：'linkedin'，标签：'linkedin'}，
{值：'pinterest'，标签：'pinterest'}，
{值：'skype'，标签：'skype'}，
{值：'tiktok'，标签：'tiktok'}，
{值：'tumblr'，标签：'tumblr'}，
{值：'twitter'，标签：'twitter'}，
{值：'whatsapp'，标签：'whatsapp'}，
{值：'wordpress'，标签：'wordpress'}，
{值：'youtube'，标签：'youtube'}，
{值：'other'，标签：'other'}，
],
社会详情：[
{
索引:索引,，
类型：“，
链接：“，
}
]
};
}
addNewRow=（e）=>{
this.setState（prevState=>({
社会详情：[
…州政府，社会细节，
{
索引：index++，
类型：“，
链接：“，
}
]
}));
}
deleteRow=（索引）=>{
这是我的国家({
socialDetails:this.state.socialDetails.filter(
（s） =>索引！==s.index
)
})
}
单击删除（记录）{
这是我的国家({
socialDetails:this.state.socialDetails.filter（r=>r！==record）
})
}
componentDidMount（）{
}
渲染=（）=>{
让{socialDetails，options}=this.state；
const{onInputChange}=this.props；
返回(
)
}
}

---

您所经历的指数增加2或3的行为是由于以下原因造成的。除此之外，严格模式还有助于检测意外的副作用，以帮助您为即将推出的功能准备应用程序。在并发模式下，React会将渲染分解为更小的块，并根据需要暂停和恢复工作。这意味着渲染阶段生命周期方法可以运行多次

为了帮助您为即将到来的并发模式行为做好准备，strict模式将故意调用渲染阶段生命周期两次，以识别潜在的副作用。状态更新程序函数就是其中的一个实例，这意味着在状态更新程序函数中调用

index++

将在严格模式下运行两次

最简单的解决方案是，在调用

this.setState

之前，只需将新索引分配给一个变量，这样您的状态更新程序函数就是幂等函数，并且可以被多次调用

addNewRow=（e）=>{
const newIndex=++this.index
this.setState（（prevState）=>({
社会详情：[
…州政府，社会细节，
{
索引：newIndex，
类型：“，
链接：“
}
]
}));
};

漂亮的解释！感谢您澄清渲染方法mate！：）