React Native列表更新问题：添加参与者时数据被覆盖

核心问题 #

1. 普通变量丢失状态：你在组件内部声明的listParticipants和seeParticipants是普通变量，组件每次重新渲染（比如调用setShowParticipants后）都会重新初始化这两个变量为空数组，导致之前添加的内容丢失。第二次添加时看似覆盖最后一项，其实是在新的空数组里添加，所以只会显示最新的那一个。
2. 直接修改数组+存储JSX元素：直接用push修改数组不符合React状态不可变的原则，而且把JSX元素存在状态里是反模式，应该存储原始数据，渲染时再生成JSX。
3. 组件重新执行代码：这是React的正常机制，每次状态更新组件都会重新渲染，内部代码会重新执行，但用useState管理的状态会被保留。

修复代码示例 #

// imports...
const Create = () {
  // 用useState管理参与者数据，而非JSX元素
  const [participants, setParticipants] = useState([]);

  // 检查参与者是否已存在的逻辑（假设你已实现此函数）
  const alreadyParticipant = (participant) => {
    return participants.some(item => item.accountId2 === participant.accountId2);
  };

  const addParticipant = (participant) => {
    if (alreadyParticipant(participant)) {
      console.log("Participant already");
      return;
    }
    // 不可变更新：基于当前状态创建新数组，避免直接修改原状态
    setParticipants(prevParticipants => [...prevParticipants, participant]);
  };

  // 渲染时根据数据生成JSX元素
  const showParticipants = participants.map((participant) => (
    <TouchableOpacity key={participant.accountId2}>
      <FriendCardAvatar friend={participant} />
    </TouchableOpacity>
  ));

  // ...其他好友列表相关代码

  return (
    <>
      <View>
        {/* 好友列表展示 */}
        {showFriends}
      </View>
      
      <View>
        {/* 参与者列表展示 */}
        {showParticipants}
      </View>
    </>
  );
}

关键改进点 #

• 用useState存储参与者的原始数据，确保状态在组件重新渲染时被正确保留。
• 更新状态时使用函数式更新，避免依赖当前状态的快照，保证每次更新都基于最新状态。
• 渲染参与者列表时通过map遍历数据数组生成JSX，每个元素使用唯一的key（优先用accountId2这类唯一标识）。
• 移除了普通变量listParticipants和seeParticipants，所有状态统一由React的useState管理。

这样修改后，多次添加好友不会覆盖之前的内容，组件重新渲染时也能正确保留所有已添加的参与者。

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