React中使用splice()添加组件丢失数组状态问题求助

核心问题 #

你当前的写法存在两个关键错误，直接导致了后续组件的状态丢失：

1. 将JSX元素直接存入state：React的state设计用于存储数据，而非UI元素。当你修改数组插入新JSX时，后续的旧元素会被重新创建，之前组件的内部状态自然丢失。
2. 使用数组索引作为组件key：添加新元素后，原索引位置之后的组件key会发生偏移（比如原索引2的组件变成索引3），React会判定这些是全新组件，卸载旧实例并重新挂载，导致之前的状态完全重置。

修复步骤 #

1. 重构state，存储数据而非JSX

把questionDivs改成存储问题的数据结构，每个问题包含唯一标识、类型、选项等核心数据：

// 初始化示例：两个带初始选项的问题
const [questions, setQuestions] = useState([
  { id: 'question_1', type: 'multiple-choice', options: ['A', 'B'] },
  { id: 'question_2', type: 'multiple-choice', options: ['C', 'D'] }
]);

2. 修改添加问题的函数

现在插入的是数据对象，不再是JSX元素：

const addQuestionDiv = () => {
  const newId = `question_${questions.length + 1}`;
  const newQuestions = [...questions];
  // 在选中索引的下一位插入新问题数据
  newQuestions.splice(selectedDivIndex + 1, 0, {
    id: newId,
    type: 'multiple-choice',
    options: [] // 初始空选项
  });
  setQuestions(newQuestions);
};

3. 渲染时根据数据生成JSX

遍历数据数组，用每个问题的id作为key（唯一且稳定），避免索引key的问题：

{questions.map((question) => (
  <div 
    key={question.id} 
    className="my-[1%] ml-[28%] w-[44%] min-h-[30%]"
    onClick={() => SetCurrentDivHandler(questions.findIndex(q => q.id === question.id))}
  >
    <Questions 
      questionData={question}
      // 传递回调，让子组件可以更新父组件的问题数据
      onUpdateQuestion={(updatedData) => {
        setQuestions(prev => prev.map(q => q.id === question.id ? updatedData : q));
      }}
    />
  </div>
))}

4. 调整Questions组件逻辑

让组件基于传入的questionData初始化状态，并通过回调同步更新父组件数据：

const Questions = ({ questionData, onUpdateQuestion }) => {
  const [options, setOptions] = useState(questionData.options);

  const addOption = () => {
    const newOptions = [...options, `Option ${options.length + 1}`];
    setOptions(newOptions);
    // 通知父组件更新对应问题的选项数据
    onUpdateQuestion({ ...questionData, options: newOptions });
  };

  return (
    <div>
      {/* 渲染问题标题、选项等内容 */}
      {options.map((opt, idx) => <div key={idx}>{opt}</div>)}
      <button onClick={addOption}>+ 添加选项</button>
    </div>
  );
};

修复原理 #

• 用数据而非UI元素存state，修改数组时仅更新数据，React会精准更新对应组件，不会破坏后续组件的实例。
• 稳定的唯一id作为key，确保组件位置变化时，React能识别出是同一个组件实例，保留其内部状态。

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