Javascript 在StrictMode下，如何在React-setState钩子中将一个随机数添加到数组中

我正在编写一些React代码，我想在

项

数组的末尾添加一个随机数，只需单击一个按钮

我在StrictMode下运行React，我知道这会导致我的setState钩子运行两次，这会导致两个随机数被添加到我的数组中，而不仅仅是一个

我的问题是：解决这个问题的最好办法是什么？我的代码如下

const{useState，StrictMode}=React；
函数App（）{
const[items，setItems]=useState（[]）；
返回(

{items.map（（item，index）=>
item{item}
）}

setItems（PreviItems=>{
让newItem=Math.random（）
previitems.push（newItem）
返回[…项目]
}
)}>添加项
);
}
ReactDOM.render(
,
document.getElementById（“根”）
);
好消息是
StrictMode
做了它应该做的事情：它在代码中标记了一个错误。：-）

问题是您违反了反应状态的规则之一：您直接（通过
.push
）修改
previitems
。这意味着，如果您的
setState
回调函数被调用两次，即使它两次都被传递相同的
previitems
数组，因为您修改了该数组，您最终会得到两个条目

就像这样：


const setItems=previitems=>{
让newItem=Math.random（）；
previitems.push（newItem）；
返回[…项目]；
};
常量项=[1]；
让新项目；
newItems=设置项（items）；
newItems=setItems（items）；//由StrictMode随机引入
console.log（newItems）