如何在reactjs中动态地向另一个数组添加和删除映射的数组，以及在reactjs中再次单击时从arr中删除

constructor(props) {
  super(props);
  this.state = {
    mappedArray: [], // 存储映射的数组
    deleteIndexes: [] // 存储要删除的数组元素的索引
  };
}

handleClick = (index) => {
  const { mappedArray, deleteIndexes } = this.state;
  
  // 判断是否已经存在于deleteIndexes中，如果存在则从deleteIndexes中删除
  if (deleteIndexes.includes(index)) {
    const updatedDeleteIndexes = deleteIndexes.filter(i => i !== index);
    this.setState({ deleteIndexes: updatedDeleteIndexes });
  } else {
    // 添加映射的数组元素到mappedArray中
    const newMappedArray = mappedArray.concat(index);
    this.setState({ mappedArray: newMappedArray });
  }
}

handleDelete = () => {
  const { mappedArray, deleteIndexes } = this.state;
  
  // 从mappedArray中删除deleteIndexes中的元素
  const updatedMappedArray = mappedArray.filter((_, index) => !deleteIndexes.includes(index));
  this.setState({ mappedArray: updatedMappedArray, deleteIndexes: [] });
}

render() {
  const { mappedArray, deleteIndexes } = this.state;
  const arr = [/* 原始数组 */];

  return (
    <div>
      {arr.map((item, index) => (
        <div key={index}>
          <span>{item}</span>
          <button onClick={() => this.handleClick(index)}>
            {deleteIndexes.includes(index) ? '取消删除' : '删除'}
          </button>
        </div>
      ))}
      <button onClick={this.handleDelete}>删除选中项</button>
    </div>
  );
}