React Native组件状态覆盖问题：如何保留旧状态并追加新状态

看起来你遇到的问题是每次点击子组件后，questionsListArray都会被覆盖而不是保留原有内容并更新/追加新项。我来帮你分析下代码里的问题，然后给出修复方案：

问题根源 #

你的getAnswer方法里的循环逻辑有问题：在for (var key in obj)循环中，每次迭代都会从原始的状态数组重新过滤，而不是基于上一次修改后的数组来处理。比如如果传入的obj包含多个问答项，第一次循环的修改会被第二次循环覆盖，最终只保留最后一次循环的结果，导致原有状态被覆盖。

另外，直接用var array = this.state.questionsListArray虽然是赋值，但后续循环逻辑的错误才是核心问题。

修复后的代码 #

把getAnswer方法改成这样，就能实现保留原有状态，存在则更新，不存在则追加的效果：

getAnswer = (obj) => {
  // 创建原状态数组的副本，遵循React状态不可变原则
  let updatedArray = [...this.state.questionsListArray];

  // 遍历传入的每个问答项（用Object.entries更清晰地拿到键值对）
  for (const [questionId, newItem] of Object.entries(obj)) {
    // 查找数组中是否已有该question_id的项
    const existingItemIndex = updatedArray.findIndex(item => item.question_id === questionId);
    
    if (existingItemIndex !== -1) {
      // 如果存在，替换掉旧的项
      updatedArray[existingItemIndex] = newItem;
    } else {
      // 如果不存在，追加新项到数组末尾
      updatedArray.push(newItem);
    }
  }

  // 验证输出（可选）
  updatedArray.forEach(item => {
    console.log(`array is  ${item.question_id} ${item.Answer} ${item.comment} ${item.assignedTo}`);
  });

  // 更新状态，如果需要持久化到AsyncStorage，用setState的回调确保状态已更新
  this.setState({ questionsListArray: updatedArray }, () => {
    AsyncStorage.setItem('qArray', JSON.stringify(updatedArray));
  });
}

关键改进点 #

• 数组副本创建：用[...this.state.questionsListArray]创建原数组的浅拷贝，避免直接修改React状态（状态是不可变的，必须通过新对象/数组更新）。
• 高效查找替换：用findIndex定位已有项，比filter更高效（找到匹配项就停止遍历），然后直接替换对应位置的元素。
• 正确的循环逻辑：基于修改后的数组进行下一次迭代，确保所有传入的问答项都能被正确处理，不会互相覆盖。
• AsyncStorage持久化：把AsyncStorage.setItem放在setState的回调里，确保状态更新完成后再保存，避免数据不一致。

如果需要从AsyncStorage恢复初始状态，可以在组件挂载时处理：

componentDidMount() {
  AsyncStorage.getItem('qArray').then(value => {
    if (value != null) {
      this.setState({ questionsListArray: JSON.parse(value) });
    }
  });
}

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