Нужно в списке реализовать возможность удаления элементов, чтобы при перезагрузке страницы оставались результаты сессии

Question

Есть список городов и при поиске одного из них есть возможность удалить город из списка, но после удаления одного элемента уже не выводятся другие города. Это первая проблема. А также необходимо, чтобы при обновлении страницы сохранялись результаты предыдущей сессии(т.е удаленные города не показывались при вводе). Не могу понять как решить эти проблемы. Подскажите, пожалуйста.

    class App extends React.Component {
  state = {
    cities: [
      {id: 1, name: 'Moscow'},
      {id: 2, name: 'Novosibirsk'},
      {id: 3, name: 'Tyumen'},
      {id: 5, name: 'Tobolsk'},
      {id: 6, name: 'Kurgan'},
      {id: 7, name: 'Omsk'},
      {id: 8, name: 'Zelenograd'},
      {id: 9, name: 'Sochi'},
      {id: 10, name: 'Tula'},
    ],
    cityValue: ''
  }
  render() {
    const onInputChange = (e) => {
      this.setState({cityValue: e.target.value})
    }

    const onDelete = (idx, e) => {
      const cities = Object.assign([], filteredCities)
      cities.splice(idx, 1)
      this.setState({cities: cities})
    }

    let filteredCities = this.state.cities.filter((city) => {
      return city.name.toLowerCase().includes(this.state.cityValue.toLowerCase())
    })

    return (
      <div className="container text-center">
        <input onChange={onInputChange} className='mt-2'/>
        <div>
          {
            this.state.cityValue.length < 3 ? null :
            filteredCities.map(city => {
              return (
                <li key={city.id} className='mt-2'>{city.name} <button onClick={onDelete.bind(this, this.idx)}>Delete</button></li>
              )
            })
          }
        </div>
      </div>
    );
  }
}

Answer 1

Сделал пример того, как можно решить вашу проблему https://codesandbox.io/s/eager-sinoussi-j3q7s?file=/src/App.js:0-1528

Используется localStorage

import React, { useState, useCallback } from "react";
import "./styles.css";

const storedCities = JSON.parse(localStorage.getItem("cities")) || [
  { id: 1, name: "Moscow" },
  { id: 2, name: "Novosibirsk" },
  { id: 3, name: "Tyumen" },
  { id: 5, name: "Tobolsk" },
  { id: 6, name: "Kurgan" },
  { id: 7, name: "Omsk" },
  { id: 8, name: "Zelenograd" },
  { id: 9, name: "Sochi" },
  { id: 10, name: "Tula" }
];

export default function App() {
  const [cities, setCities] = useState(storedCities);
  const [city, setCity] = useState("");

  const saveCities = useCallback(
    cities => {
      setCities(cities);
      localStorage.setItem("cities", JSON.stringify(cities));
    },
    [setCities]
  );

  const onInputChange = useCallback(
    e => {
      setCity(e.target.value);
    },
    [setCity]
  );

  const onDelete = useCallback(
    (id, e) => {
      saveCities(cities.filter(citeItem => citeItem.id !== id));
    },
    [cities, saveCities]
  );

  return (
    <div className="App">
      <input onChange={onInputChange} className="mt-2" />
      <div>
        {city.length < 3
          ? null
          : cities
              .filter(cityItem =>
                cityItem.name.toLowerCase().includes(city.toLowerCase())
              )
              .map((city, idx) => (
                <li key={city.id} className="mt-2">
                  {city.name}
                  <button onClick={onDelete.bind(this, city.id)}>Delete</button>
                </li>
              ))}
      </div>
    </div>
  );
}

БЛОГ НА HUSL

Нужно в списке реализовать возможность удаления элементов, чтобы при перезагрузке страницы оставались результаты сессии

Ответы (1 шт):