如果列表中不存在某个项目，我想将其推送到列表中。如果该项目已在列表中，则删除该项目

Question

如果某个项目以前未包含在列表中，我想将其推送到列表中。如果存在，则删除该项目。我能够完成第一部分，但不知道如何删除它。

 handleCityCheckbox = (param1) => {

    var { cityList = [] } = this.state;

      //if cityList doesnt have param1

    if (!cityList.includes(param1)) {

      cityList.push(param1);

      this.setState({ cityList });

    } else  {

      

    }

    this.setState({ cityList });

  };

其他部分是什么？

Answer 1

handleCityCheckbox = (param1) => {    const { cityList = [] } = this.state;    const itemIndex = cityList.indexOf(param1);    if (itemIndex === -1)) {      cityList.push(param1);    } else  {      cityList = cityList.filter((e, index) => index !== itemIndex)    }    this.setState({ cityList });  };

Answer 2

过滤功能： const handleSubmit = (event) => {    event.preventDefault();    if (!name) {      alert("Enter the city name");      return;    }    let tempList = cities.filter(      (city) => city.toLowerCase() !== name.toLowerCase()    );    if (tempList.length === cities.length) {      tempList.push(name);      setCities(tempList);      return;    } else {      setCities(tempList);    }  };在上面的函数中，我们首先使用filter函数过滤掉城市名称，如果存在则删除并赋值给，然后与主列表tempList比较 的大小，如果相同则说明该城市名称不存在于主列表中，因此我们将其推送到并使用 modded更新状态，否则，我们只需设置过滤掉的。tempListcitiesnametempListcitiestempListtempList完整示例：import React, { useState } from "react";import "./styles.css";export default function App() {  const [cities, setCities] = useState(["Pune", "Delhi"]);  const [name, setName] = useState("");  const handleSubmit = (event) => {    event.preventDefault();    if (!name) {      alert("Enter the city name");      return;    }    let tempList = cities.filter(      (city) => city.toLowerCase() !== name.toLowerCase()    );    if (tempList.length === cities.length) {      tempList.push(name);      setCities(tempList);      return;    } else {      setCities(tempList);    }  };  return (    <div className="App">      <form onSubmit={handleSubmit}>        <input onChange={(event) => setName(event.target.value)} />        <button type="submit">Submit</button>      </form>      {cities.map((city) => (        <p>{city}</p>      ))}    </div>  );}代码沙箱链接