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

在ReactJS中，可以使用状态（state）来动态地向另一个数组添加和删除映射的数组，并且在再次单击时从数组中删除。

首先，你需要在React组件的构造函数中初始化两个数组，一个用于存储映射的数组（mappedArray），另一个用于存储要删除的数组元素的索引（deleteIndexes）。

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

接下来，你可以创建一个函数来处理添加和删除操作。在添加操作中，你可以使用concat()方法将新的映射数组元素添加到mappedArray中。在删除操作中，你可以使用filter()方法过滤掉要删除的元素，并将其索引添加到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: [] });
}

最后，在React组件的render方法中，你可以使用map()方法遍历原始数组，并根据映射的数组和删除的索引来动态地添加和删除元素。

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>
  );
}

这样，当你单击"删除"按钮时，对应的数组元素将被添加到mappedArray中，并且按钮的文本将变为"取消删除"。再次单击"取消删除"按钮时，对应的数组元素将从mappedArray中删除。当你单击"删除选中项"按钮时，handleDelete函数将根据deleteIndexes中的索引从mappedArray中删除对应的元素。

请注意，上述代码中的arr是一个占位符，你需要将其替换为你实际使用的数组。此外，你还可以根据需要进行样式和其他逻辑的调整。

希望这个答案能够满足你的需求！如果你需要更多帮助，请随时提问。