使用拼接方法从本地存储删除数据时，总是删除最后一个元素

Question

import React, { useEffect, useState } from "react";
// import styles from "./home.module.css";
import { v4 as uuidv4 } from "uuid";

const Home = () => {
  let itemArray = localStorage.getItem("value")
    ? JSON.parse(localStorage.getItem("value"))
    : [];
  const [object, setObject] = useState(itemArray);
  const [objectValue, setObjectValue] = useState({});

  const handleChange = (e) => {
    const { value, name } = e.target;
    setObjectValue((prevValue) => {
      return { ...prevValue, [name]: value, id: uuidv4() };
    });
  };
  const handleSubmit = (e) => {
    setObject((prevValue) => [...prevValue, objectValue]);
    setObjectValue({ price: "", name: "" });
    e.preventDefault();
  };
  useEffect(() => {
    localStorage.setItem("value", JSON.stringify(object));
  }, [object]);
  const handleDelete = (index) => {
    itemArray.splice(index, 1);
    localStorage.setItem("value", JSON.stringify(itemArray));
    window.location.reload();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input name="price" onChange={handleChange} value={objectValue.price} />
        <input name="name" onChange={handleChange} value={objectValue.name} />
        <button type="submit">Submit</button>
      </form>
      <div>
        {object?.map((item, index) => (
          <>
            <h1>{item.price}</h1>
            <button onClick={() => handleDelete(index)}>Delete</button>
          </>
        ))}
      </div>
    </div>
  );
};

export default Home;

使用splice方法从本地存储删除数据时，总是删除最后一个元素，如何解决？

大部分代码都是关于打印输入数据并将其存储在数组中

当我在创建数据后立即删除任何元素时，最后一个元素也会被删除。手动刷新页面后不会出现此问题。

Answer 1

这是因为如果你不使用窗口重新加载，你就不会在handleDelete中更新你的对象。

你可以这样做：

const handleDelete = (index) => {
  itemArray.splice(index, 1);
  localStorage.setItem("value", JSON.stringify(itemArray));
  setObject(itemArray)
};

实际上，最好使用setObject进行删除（使用id来标识要删除的条目），然后用更新后的对象设置localstorage。