数组之间的变换(react)

159 阅读2分钟

在写项目的时候遇到了这样的一个需求。有个俩个div one two,一个是空的,one里面包裹着ul,ul下面的li是一条条的数据。需要点击其中一条的数据,然后点击一个按钮就能把这条数据传到two里面去。还有一个按钮,点击它的时候回把整条数据传到two里面。并且one的数据回消失然后也可以把传过去的数据已同样的方法在转回到one。下面是这一段的js的代码

 //把全部数据传过去
  removeList() {
    //  判断该次日期选择是否含有数据,没有数据直接结束逻辑
    if (this.state.dataName.length > 0) {
      // 复制一个备选数据的模板(因为this.state没法通过数组api进行修改,只能通过this.setState)
      var dataList = this.state.dataName.slice(0);
      // 复制完数据后,将备选数据置空
      this.setState({ dataName: [] })
    } else {
      return;
    }
    //  将上一次选择的数据和这一次的数据拼接在一起,得到最新的悬着结果
    this.setState({
      dataList: Array.from(new Set([...this.state.dataList, ...dataList]))
    }, () => {
      Array.from(new Set(this.state.dataList))
    })
  }
  //把全部数据退回来
  backList() {
    if (this.state.dataList.length > 0) {
      var dataName = this.state.dataList.slice(0)
    } else {
      return;
    }
    this.setState({
      dataName: [...this.state.dataName, ...dataName]
    })
    this.setState({ dataList: [] })
  }
  //只把点中的数据传过去
  oneList() {
    if (this.state.ArrayList.length > 0) {
      var dataList = this.state.ArrayList.slice(0);
      this.setState({ ArrayList: [] })
    } else {
      return;
    }
    const filterList = this.state.dataName.filter((item) => {
      if (item.id !== dataList[0]["id"]) {
        return item
      }
      return null;
    })
    this.setState({ dataName: filterList })
    this.setState({
      dataList: [...this.state.dataList, ...dataList]
    })
  }
  //点钟一个将数局返回
  oneBackList() {
    if (this.state.ArrayList.length > 0) {
      var dataName = this.state.ArrayList.slice(0);
      this.setState({ ArrayList: [] })
    } else {
      return;
    }
    const backDataList = this.state.dataList.filter((items) => {
      if (items.id !== dataName[0]["id"]) {
        return items
      }
      return null;
    })
    this.setState({ dataList: backDataList })
    this.setState({
      dataName: [...this.state.dataName, ...dataName]
    })
  }

现在这个逻辑还是有些问题,我们是通过下拉框来选择导入的数据的,但是就是这选择过这条数据之后还可以选择这条数据。还可以导入到two div里面,这样就导致导入数据变得重复了。我通过数组去重还是没有解决掉这个问题,希望有大神看到之后能给我一些解决方案。