React删除规则时rules状态为空问题求助

• 核心问题：你在修改rules状态时直接操作了原数组（用push、splice），React状态是不可变的，直接修改原数组不会让React检测到状态变化——因为数组的引用没改变，导致组件无法正确重新渲染，最终出现删除时状态显示异常的问题。

• 修复步骤：

  1. 修改添加规则的逻辑：
     原代码直接修改原数组的方式错误，改成创建新数组来更新状态：

     // 替换原添加逻辑
     const newRules = [...rules, rule];
     setRules(newRules);
     

  2. 修改删除规则的逻辑：
     用splice修改原数组的方式不符合React状态更新规范，改成用filter生成新数组（推荐）：

     function deleteRule(i) {
       const newRules = rules.filter((_, index) => index !== i);
       setRules(newRules);
     }
     

  3. 额外优化：不要用索引作为组件key：
     原代码用key={i + 1}，删除元素后索引会重新排列，可能导致渲染异常。建议给每个规则添加唯一标识，比如提交时生成时间戳id：

     const rule = {
       id: Date.now(), // 添加唯一id
       name: e.target.name.value,
       sourceSearchPattern: e.target.sourceSearchPattern.value,
       replaceType,
       value: e.target.value.value
     };
     

     渲染时用key={rule.id}，删除逻辑也可以改成按id过滤，更可靠：

     function deleteRule(targetId) {
       const newRules = rules.filter(rule => rule.id !== targetId);
       setRules(newRules);
     }
     

• 注意代码里的小bug：
  原代码中rule.location = e.location.value;应该改为rule.location = e.target.location.value;，表单元素的值要从e.target中获取。

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