对不起，有很多文本和逻辑需要理解，但我认为你的问题是你使用newBoxShadows.splice(index, 1);从数组中删除。这是正确的方式，但这就是为什么你失去了索引。尝试delete newBoxShadows[index]。但要小心，因为delete不会减少数组的长度。
我不明白你说的“第三层被重命名为第二层”是什么意思，因为你的层没有“名字”。但是也许下面的描述会有所帮助：
1.保存在selectedLayer中，不是索引，而是框阴影对象本身。
1.在框中添加阴影对象id属性。您将需要一个id计数器。

添加另一个名为index的状态变量，将名为id的键添加到newBoxShadow对象。
键的值应为状态变量index。
现在我们需要在用户每次点击add layer时增加index的值，现在使用这个索引来显示层名。
这样，即使用户删除层，索引和层名称也不会更改。
代码：

import "./boxShadowGenerator.css";
import React, { useState, useRef, useEffect } from "react";

export const BoxShadowGenerator = () => {
 const [boxShadows, setBoxShadows] = useState([]);
  const [selectedLayer, setSelectedLayer] = useState(0);
  const [index, setIndex] = useState(1);
  const buttonRefs = useRef([]);
  const addBoxShadow = () => {
  
    setIndex(index + 1);
    const newBoxShadow = {
      id: index,
      hOffset: 0,
      vOffset: 0,
      blurRadius: 0,
      spreadRadius: 0,
      color: "#000",
    };
    const newBoxShadows = [...boxShadows, newBoxShadow];
    setBoxShadows(newBoxShadows);
    setSelectedLayer(newBoxShadows.length - 1); // Select the latest layer
  };

  const removeBoxShadow = (index) => {
    const newBoxShadows = [...boxShadows];
    newBoxShadows.splice(index, 1);
    setBoxShadows(newBoxShadows);
    if (selectedLayer === index && newBoxShadows.length > 0) {
      setSelectedLayer(0);
    }
  };

  const copyToClipboard = () => {
    const boxShadow = boxShadows
      .map(
        ({ hOffset, vOffset, blurRadius, spreadRadius, color }) =>
          `${hOffset}px ${vOffset}px ${blurRadius}px ${spreadRadius}px ${color}`
      )
      .join(", ");
    navigator.clipboard.writeText(`box-shadow:${boxShadow};`);
  };

  useEffect(() => {
    if (buttonRefs.current[selectedLayer]) {
      buttonRefs.current[selectedLayer].focus();
    }
  }, [selectedLayer]);

  return (
    <>
      <div className="BSG-main-container">
        <div className="BSG-control-container">
          <h2>Box Shadow Generator</h2>
          <div
            className="box-preview"
            style={{
              boxShadow: boxShadows
                .map(
                  ({ hOffset, vOffset, blurRadius, spreadRadius, color }) =>
                    `${hOffset}px ${vOffset}px ${blurRadius}px ${spreadRadius}px ${color}`
                )
                .join(", "),
            }}
          ></div>

          {boxShadows.length > 0 && (
            <div>
              <h3>Layer {selectedLayer + 1}</h3>
              <div>
                <label htmlFor={`hOffset${selectedLayer}`}>
                  Horizontal offset:
                </label>
                <input
                  type="range"
                  id={`hOffset${selectedLayer}`}
                  min="-50"
                  max="50"
                  value={boxShadows[selectedLayer].hOffset}
                  onChange={(e) => {
                    const newBoxShadows = [...boxShadows];
                    newBoxShadows[selectedLayer] = {
                      ...newBoxShadows[selectedLayer],
                      hOffset: parseInt(e.target.value),
                    };
                    setBoxShadows(newBoxShadows);
                  }}
                />
              </div>
              <div>
                <label htmlFor={`vOffset${selectedLayer}`}>
                  Vertical offset:
                </label>
                <input
                  type="range"
                  id={`vOffset${selectedLayer}`}
                  min="-50"
                  max="50"
                  value={boxShadows[selectedLayer].vOffset}
                  onChange={(e) => {
                    const newBoxShadows = [...boxShadows];
                    newBoxShadows[selectedLayer] = {
                      ...newBoxShadows[selectedLayer],
                      vOffset: parseInt(e.target.value),
                    };
                    setBoxShadows(newBoxShadows);
                  }}
                />
              </div>
              <div>
                <label htmlFor={`blurRadius${selectedLayer}`}>
                  Blur radius:
                </label>
                <input
                  type="range"
                  id={`blurRadius${selectedLayer}`}
                  min="0"
                  max="50"
                  value={boxShadows[selectedLayer].blurRadius}
                  onChange={(e) => {
                    const newBoxShadows = [...boxShadows];
                    newBoxShadows[selectedLayer] = {
                      ...newBoxShadows[selectedLayer],
                      blurRadius: parseInt(e.target.value),
                    };
                    setBoxShadows(newBoxShadows);
                  }}
                />
              </div>
              <div>
                <label htmlFor={`spreadRadius${selectedLayer}`}>
                  Spread radius:
                </label>
                <input
                  type="range"
                  id={`spreadRadius${selectedLayer}`}
                  min="-50"
                  max="50"
                  value={boxShadows[selectedLayer].spreadRadius}
                  onChange={(e) => {
                    const newBoxShadows = [...boxShadows];
                    newBoxShadows[selectedLayer] = {
                      ...newBoxShadows[selectedLayer],
                      spreadRadius: parseInt(e.target.value),
                    };
                    setBoxShadows(newBoxShadows);
                  }}
                />
              </div>
              <div>
                <label htmlFor={`color${selectedLayer}`}>Color:</label>
                <input
                  type="color"
                  id={`color${selectedLayer}`}
                  value={boxShadows[selectedLayer].color}
                  onChange={(e) => {
                    const newBoxShadows = [...boxShadows];
                    newBoxShadows[selectedLayer] = {
                      ...newBoxShadows[selectedLayer],
                      color: e.target.value,
                    };
                    setBoxShadows(newBoxShadows);
                  }}
                />
              </div>
            </div>
          )}
          <div className="buttons">
            <button onClick={addBoxShadow}>Add Layer</button>
            {boxShadows.length > 0 && (
              <>
                <button onClick={() => removeBoxShadow(selectedLayer)}>
                  Remove Layer
                </button>
                <button onClick={copyToClipboard}>Copy CSS to Clipboard</button>
              </>
            )}
          </div>
        </div>
        {boxShadows.length > 0 && (
          <div className="box-shadow-list-container">
            {boxShadows.map((boxShadow, index) => (
              <button
                ref={(button) => (buttonRefs.current[index] = button)}
                key={index}
                id={index}
                className={`box-shadow-list-item ${
                  selectedLayer === index ? "selected" : ""
                }`}
                onClick={() => setSelectedLayer(index)}
              >
                Layer {boxShadow.id}
              </button>
            ))}
          </div>
        )}
      </div>
    </>
  );
};