Javascript React usestate数组长度因我单击的项目而异

我试图建立一个列表，你可以添加和删除组件

添加是有效的，但当我尝试删除一个项目时，之后的每个项目也会被删除。 我发现我使用的use state数组的长度取决于我单击delete的项目

const Alerting = () => {
const [Alerts, setAlert] = useState([]);

 const AddAlertingChoice = () => {
        const addedAlerts = Alerts => [...Alerts, <AlertingCoinChoice coins={coins} id={new Date().getUTCMilliseconds()}];
        setAlert(addedAlerts);
    }

    const DeleteAlertingChoice = id =>{

        console.log("alerts "+Alerts.length) //This length always displays the item index-1?

        const removedArr = [...Alerts].filter(alert => alert.props.id != id)
        setAlert(removedArr)
    }

 return (
        <>
            <AlertingContainer>
                <CoinChoiceContainer>
                    {Alerts.map((item, i) => (
                        item
                    ))}
                </CoinChoiceContainer>
                <AddAlertButton onClick={AddAlertingChoice}>+</AddAlertButton>
            </AlertingContainer>
        </>
    )

const Alerting=（）=>{
const[Alerts，setAlert]=useState（[]）；
const AddAlertingChoice=（）=>{
const addedAlerts=警报=>[…警报{
console.log（“警报”+alerts.length）//此长度始终显示项目索引-1？
const removedArr=[…警报].filter（警报=>alert.props.id！=id）
setAlert（removedArr）
}
返回(
{Alerts.map（（项目，i）=>(
项目
))}
+
)

项目

const AlertingCoinChoice = ({coins, id, DeleteAlertingChoice}) => {

    return (
        <>
            <AlertingCoin>
                <CoinSelect id={'SelectCoin'}>
                    <OptionCoin value='' disabled selected>Select your option</OptionCoin>
                </CoinSelect>
                <ThresholdInput id={'LowerThresholdInput'} type='number'
                                pattern='^-?[0-9]\d*\.?\d*$'/>
                <ThresholdInput id={'UpperThresholdInput'} type='number'
                                pattern='^-?[0-9]\d*\.?\d*$'/>
                <SaveButton id={'AlertSaveAndEdit'} onClick={ClickSaveButton}>Save</SaveButton>
                <DeleteAlertButton onClick={() => {DeleteAlertingChoice(id)}}>X</DeleteAlertButton>
            </AlertingCoin>
        </>
    )

const-AlertingCoinChoice=（{coins，id，deleteArtingChoice}）=>{
返回(
选择您的选项
拯救
{DeleteAlertingChoice（id）}}>X
)

---

为什么它不能删除我通过id参数传递的项目？

听起来，在最初放置新的

{
const[alerts，setAlerts]=useState（[]）；
const AddAlertingChoice=（）=>{
设置警报([
…警报，
{coins，id:Date.now（）}
]);
}
const DeleteAlertingChoice=id=>{
console.log（“警报”+警报.length）；
setAlerts（alerts.filter（alert=>alert.id！==id））；
}
返回(
{Alerts.map（（alertData）=>(
))}
+
);
};

---

当您已经只渲染一个顶级JSX项时，您也不需要片段。

您所指的前端对象是什么？它是数组元素以外的东西吗？

const Alerting = () => {
   const [alerts, setAlerts] = useState([]);

   const AddAlertingChoice = () => {
      setAlerts([
         ...alerts,
         { coins, id: Date.now() }
      ]);
   }
   const DeleteAlertingChoice = id => {
      console.log("alerts " + alerts.length);
      setAlerts(alerts.filter(alert => alert.id !== id));
   }
   return (
         <AlertingContainer>
            <CoinChoiceContainer>
               {Alerts.map((alertData) => (
                  <AlertingCoinChoice {...alertData} DeleteAlertingChoice={DeleteAlertingChoice} />
               ))}
            </CoinChoiceContainer>
            <AddAlertButton onClick={AddAlertingChoice}>+</AddAlertButton>
         </AlertingContainer>
   );
};