過濾功能：
?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>
? );
}
代碼沙箱鏈接
