Reactjs 在添加到设置状态之前，根据长度管理设置状态

我基本上有一个类型为array的状态，其中将有一个所需的最大限制，比如说数组中有5个元素的限制

使用元素添加到状态可以是缓慢的，也可以是快速的

问题是，我知道这样做是行不通的：

if (data.length < DATA_LIMIT) {
  setData((s) => [...s, newData])
} else {
  // add to another array and pop off once array is less then limit
}

if（data.length[…s，新数据]）
}否则{
//添加到另一个数组并在数组小于限制时弹出
}

…由于

useState

是异步的。那么，在添加数据时，如何在useEffect中进行可靠的监控，而不会导致许多重新渲染

---

我不知道如何处理这个问题。

您可以将您的条件移动到更新回调中，如果太长，只需返回上一个状态：

setData（（s）=>{
如果（s.长度<数据限制）{
返回[…s，newData]；
}否则{
返回s；
}
});

这样，您正在检查的长度将始终是最新的

下面是一个正在运行的示例，其中它尝试以2为一组递增，您可以看到，它可以防止超过样本限制3

const{useState}=React；
const DATA_LIMIT=3；
常量示例=（）=>{
const[data，setData]=useState（[]）；
函数handleClick（）{
不动产（）；
不动产（）；
}
函数updateState（）{
设置数据（（s）=>{
如果（s.长度<数据限制）{
返回[…s，'项目']；
}否则{
返回s；
}
});
}
控制台日志（“数据”，数据）；
收益增量
}
ReactDOM.render（，document.getElementById（'root'））