我正在尝试创建一个高级正则表达式搜索应用程序，以便我搜索某些内容并将其替换到其他行中，但我正在努力完成一项更简单的任务：无法删除规则，因为 rules 状态似乎为空：

export default function App() {
  const [displayNewRule, setDisplayNewRule] = useState(false);
  const [replaceType, setReplaceType] = useState("line");
  const [rules, setRules] = useState([]);

  function handleClick() {
    setDisplayNewRule(true);
  }

  function handleSubmit(e) {
    e.preventDefault();

    const rule = {
      name: e.target.name.value,
      sourceSearchPattern: e.target.sourceSearchPattern.value,
      replaceType,
      value: e.target.value.value
    };

    if (replaceType === "occurrence") {
      rule.targetSearchPattern = e.target.targetSearchPattern.value;
      rule.location = e.location.value;
    }

    let $rules = rules;
    $rules.push(rule);
    setRules($rules);

    e.target.reset();
    handleReset();
  }

  function handleReset() {
    setDisplayNewRule(false);
  }

  function deleteRule(i) {
    let $rules = rules;
    $rules.splice(i, 1);
    setRules($rules);

    // this gets an empty rules
  }

  return (
    <div className="App">
      <form
        onSubmit={handleSubmit}
        onReset={handleReset}
        style={{ display: displayNewRule || "none" }}
      >
        <h3>Create new rule</h3>

        <div className="input-group">
          <label htmlFor="name">Name:</label>
          <input type="text" id="name" name="name" required />
        </div>

        <div className="input-group">
          <label htmlFor="sourceSearchPattern">Source search pattern:</label>
          <input
            type="text"
            id="sourceSearchPattern"
            name="sourceSearchPattern"
            required
          />
        </div>

        <div className="input-group">
          <label htmlFor="replaceType">Replace type:</label>
          <select
            id="replaceType"
            name="replaceType"
            onChange={(e) => {
              setReplaceType(e.target.value);
            }}
            required
          >
            <option value="">Select item</option>
            <option value="line">Replace line</option>
            <option value="occurrence">Replace occurrence</option>
          </select>
        </div>

        {replaceType === "occurrence" && (
          <div className="input-group">
            <label htmlFor="targetSearchPattern">Target search pattern:</label>
            <input
              type="text"
              id="targetSearchPattern"
              name="targetSearchPattern"
              required
            />
          </div>
        )}

        <div className="input-group">
          <label htmlFor="value">Value:</label>
          <input type="text" id="value" name="value" required />
        </div>

        {replaceType === "occurrence" && (
          <div className="input-group">
            Occurrence location:
            <div className="option-group">
              <input
                type="radio"
                id="next-occurrence"
                name="location"
                value="next"
                required
              />
              <label htmlFor="next-occurrence">Next occurrence</label>
            </div>
            <div className="option-group">
              <input
                type="radio"
                id="previous-occurrence"
                name="location"
                value="previous"
              />
              <label htmlFor="previous-occurrence">Previous occurrence</label>
            </div>
          </div>
        )}

        <button type="submit">Submit</button>
        <button type="reset">Cancel</button>
      </form>

      <button onClick={handleClick}>Add rule</button>

      <div className="rules">
        <h3>Rules</h3>
        {rules.map((rule, i) => ( // These rules are being displayed.
          <div className="rule" key={i + 1}>
            <h5>
              {rule.name}
              <button
                onClick={() => {
                  deleteRule(i);
                }}
              >
                Delete rule
              </button>
            </h5>
            <p>Replace type: {rule.replaceType}</p>
            <p>Source search pattern: {rule.sourceSearchPattern}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

有什么线索吗？