主页 / 问题 / 734524
Accepted
Puvvl
Asked:2020-10-23 15:07:33 +0000 UTC2020-10-23 15:07:33 +0000 UTC

从数组中删除，添加到数组中。（反应/JS）

  • 772

下午好，有一个数据数组，我需要将此数据输出到 FEname但将其发送到 BE code。codeBE 上的相同可能需要几个：

[
  {
    "name": "RAILCARD",
    "code": "HMF"
  },
  {
    "name": "16-25 RAILCARD",
    "code": "YNG"
  },
  {
    "name": "NETWORK RAILCARD",
    "code": "NEW"
  },
  {
    "name": "SENIOR RAILCARD",
    "code": "SRN"
  },
  {
    "name": "ANNUAL GOLD CARD",
    "code": "NGC"
  },
  {
    "name": "JCP DISCOUNT CARD",
    "code": "JCP"
  },
  {
    "name": "FAMILY & FRIENDS RCD",
    "code": "FAM"
  },
  {
    "name": "DISABLED ADULT",
    "code": "DIS"
  },
  {
    "name": "DISABLED CHILD",
    "code": "DIC"
  },
  {
    "name": "TWO TOGETHER R/CARD",
    "code": "2TR"
  }
]

这是我的状态：

constructor(props) {
    super(props);
    this.state = {
        railcards: railcards.map((key) => key.name),
        chipData: [],
        chipCode: [],
    };

    this.search = this.search.bind(this);
}

添加脚本+发送到BE，在这里我们在我们的数据中找到一个字段name并将其写入一个单独的状态code：

async search() {

    let chipsFound = railcards.find((e) => {
        let result;
        self.state.chipData.map((key) => key.label).forEach(function(item, index) {
            result = e.name[index] === item[index];
        });
        return result;
    });
    let chips = chipsFound ? chipsFound.code : undefined;
    self.setState({chipCode: self.state.chipCode.concat(chips)})
}

以下是删除脚本：

handleRequestDelete = (key) => {
    this.chipData = this.state.chipData;
    const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
    this.chipData.splice(chipToDelete, 1);
    this.setState({
        chipData: this.chipData,
    });
    this.search()
};

帮助删除，如果有更好的解决方案，添加到数组中，也告诉我:-)

我注意到一个小问题，例如：如果我们从数组 c 中删除一个元素key: 3并尝试再次添加一个元素，那么该元素就会出现重复key. （即添加与具有相同键的数组的最后一个元素相同的元素）

javascript

1 个回答

  1. Best Answer

    我这样解决了我的问题（对谁有用），你可以提供你的选择，我只会很高兴：

    用我们需要的键添加name到的功能：statechipData

    handleUpdateInput = (searchText) => {
    let chipKey;
    for (let i = 0; i < this.state.chipCode.length; i++) {
        chipKey = i + 1;
    }
    if(this.state.chipData.map((chip) => chip.key).indexOf(chipKey) > -1) {
        chipKey = this.state.chipData.length + 1;
    } else {
        for (let i = 0; i < this.state.chipCode.length; i++) {
            chipKey = i + 1;
        }
    }
    this.setState({
        chipData: this.state.chipData.concat([{key: chipKey === undefined ? 0 : chipKey, label: searchText}]),
        searchText: '',
    });
};

    用我们需要的键添加code到的功能：statechipCode

    handleRequestAdd = () => {
    let chipsFound = railcards.find((e) => {
        let result;
        this.state.chipData.map((key) => key.label).forEach(function(item) {
            result = e.name === item;
        });
        return result;
    });
    let chips = chipsFound ? chipsFound.code : undefined;
    let chipKey;
    for (let i = 0; i < this.state.chipData.length; i++) {
        chipKey = i;
    }
    if(this.state.chipCode.map((chip) => chip.key).indexOf(chipKey) > -1) {
        chipKey = this.state.chipCode.length + 1;
    } else {
        for (let i = 0; i < this.state.chipData.length; i++) {
            chipKey = i;
        }
    }
    this.setState({chipCode: this.state.chipCode.concat([{key: chipKey, label: chips}])})
};

    state chipCode从两个和chipData按键中删除功能：

    handleRequestDelete = (key) => {
    this.chipData = this.state.chipData;
    this.chipCode = this.state.chipCode;
    const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
    const chipCodeToDelete = this.chipCode.map((chip) => chip.key).indexOf(key);
    this.chipData.splice(chipToDelete, 1);
    this.chipCode.splice(chipCodeToDelete, 1);
    this.setState({
        chipData: this.chipData,
        chipCode: this.chipCode,
    });
    if(this.state.origin.length && this.state.destination.length) {
        this.search()
    }
};
    • 0

相关问题