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

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>

  );

}

代码沙箱链接