React Native数组对象复制时新副本被覆盖问题求助

看起来你遇到的问题根源在于没有正确维护当前数组的状态，而且每次复制操作都在原始数组上进行，导致新添加的副本总是覆盖之前的修改。让我帮你一步步修复这个问题：

问题分析 #

1. 你的组件只在state中保存了dataSource，但没有保存当前的完整元素数组——这使得你无法基于已更新的数组进行后续操作，每次都只能从初始数组重新开始。
2. duplicate函数里的array变量未定义（应该是你的初始示例数组），即便它存在，每次用初始数组做concat也会导致：每次添加的副本都是在初始数组基础上新增，而不是在已有结果上累加，自然会出现"新副本覆盖旧副本"的情况。
3. 另外，Object.assign({}, index)如果你的list是字符串类型的话其实没必要这么做，直接使用index即可；如果是对象，这个浅拷贝操作是合理的。

修复后的完整代码 #

export default class AllCategories_list extends Component { 
  constructor(props) { 
    super(props);
    // 1. 在state中添加items数组，专门保存当前所有元素，初始化为你的示例数组
    this.state = { 
      items: ['a', 'b', 'c', 'd', 'e'], // 替换成你的实际对象数组
      dataSource: new ListView.DataSource({ 
        rowHasChanged: (r1, r2) => r1 !== r2 
      }) 
    };
    // 初始化dataSource
    this.state.dataSource = this.state.dataSource.cloneWithRows(this.state.items);
  } 

  duplicate(itemToDuplicate) { 
    // 2. 基于当前state的最新数组创建新数组，保证状态不可变
    // 处理对象/基本类型的拷贝：对象用浅拷贝，基本类型直接复用
    const duplicatedItem = typeof itemToDuplicate === 'object' 
      ? Object.assign({}, itemToDuplicate) 
      : itemToDuplicate;
    // 用扩展运算符生成新数组，避免直接修改原状态
    const newItems = [...this.state.items, duplicatedItem];

    this.setState({ 
      items: newItems,
      dataSource: this.state.dataSource.cloneWithRows(newItems) 
    });
  } 

  rowData(list) { 
    return ( 
      <View style={styles.listContainer}> 
        <TouchableOpacity onPress={() => this.duplicate(list)}> 
          <Text style={styles.item}>{typeof list === 'object' ? JSON.stringify(list) : list}</Text>
        </TouchableOpacity> 
      </View> 
    );
  } 

  render() { 
    return ( 
      <View style={styles.container}> 
        <ListView 
          contentContainerStyle={styles.list} 
          dataSource={this.state.dataSource} 
          renderRow={this.rowData.bind(this)} 
        /> 
      </View> 
    );
  } 
}

关键修改说明 #

• 新增items状态：专门维护当前所有元素的数组，这样每次复制都能基于最新的数组进行操作，不会回到初始状态。
• 优化复制逻辑：用扩展运算符[...this.state.items, duplicatedItem]生成新数组，遵循React状态不可变的原则，避免直接修改原状态数组。
• 参数传递优化：用箭头函数() => this.duplicate(list)传递要复制的元素，比bind更直观，也避免了不必要的函数绑定。
• 对象拷贝兼容：针对对象和基本类型做了区分处理，如果你的元素是嵌套对象，需要用深拷贝（比如JSON.parse(JSON.stringify(itemToDuplicate))）来避免修改副本时影响原对象。

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