React中删除数组元素后如何让map渲染即时更新实现动态效果

• 你直接使用splice原地修改原数组，没有触发框架的状态更新流程：主流前端框架（React/Vue等）都依赖状态引用变化检测来触发重渲染，原地修改数组不会改变数组的引用地址，框架判定状态无变化就不会重新执行渲染逻辑。
• 原有代码存在额外问题：img标签上的idx={idx++}属于无效冗余写法，会导致同渲染周期内索引值异常；如果arradd存在重复元素，使用a作为key也会导致渲染异常。

1. 首先确保arradd是通过useState声明的响应式状态：

import { useState } from 'react';
// 声明状态，初始值按你的业务需求设置
const [arradd, setArradd] = useState(['示例1', '示例2']);

2. 修改删除逻辑，生成新数组后通过状态setter更新：
   推荐使用filter生成新数组，语法更简洁：

const handleremove = (e) => {
  const targetIdx = Number(e.target.id); // e.target.id是字符串，需转为数字
  // 过滤掉要删除的索引对应的元素，生成全新数组
  setArradd(prevArr => prevArr.filter((_, idx) => idx !== targetIdx));
}

如果习惯用splice，需要先浅拷贝原数组再修改：

const handleremove = (e) => {
  const targetIdx = Number(e.target.id);
  const newArr = [...arradd]; // 浅拷贝生成新数组，断开和原状态的引用
  newArr.splice(targetIdx, 1);
  setArradd(newArr); // 替换旧状态触发重渲染
}

3. 修正渲染部分的错误写法：

return (
  <>
    {arradd.map((a, idx) => {
      return (
        <div key={idx}> {/* 若元素有唯一id优先用唯一id作为key */}
          <HoriContainer>
            <Texty>{a}</Texty>
            <img 
              id={idx} 
              onClick={handleremove}
              src={cross}
              alt="删除按钮"
            />
          </HoriContainer>
        </div>
      )
    })}
  </>
)

内容的提问来源于stack exchange，提问作者abbas zaidi