javascript - 本地存储不更新 React

Question

我正在尝试将一组对象保存在本地存储中，每次用户单击按钮时，我都会在输入字段中添加用户名和电子邮件，但它会不断更新本地存储，而不是将新对象附加到数组中

下面是我的代码

const app = () => {
const [allusers,setAllusers] = useState([JSON.parse(localStorage.getItem('users')) || '']);
const [id,setId] = useState(0);
const [newuser,setNewuser] = useState({
    'id':id
    'name':'David',
    'email':'[e-mail]'
})
const handleChange = () =>{
    setNewuser({...newuser,[e.target.name] : e.target.value});
}
  const add = ()=>{
      setAllusers([newuser])
      localStorage.setItem('users',JSON.stringify(allusers))
      setID(id+1); // increase id by 1
  }
  return(

      <div>
        <form>
        <input type="text" name="user" onChange={handleChange}>
        <input type="text" name="email" onChange={handleChange}>
        <button onclick={()=>save}>Save</button>
        </form>
      </div>
  )
}

export default app;

标签： javascriptreactjs

Answer 1

有很多语法错误和函数的使用，比如save从未声明过但仍在使用的函数。

我重写了整个示例并使其有点模块化，以便您可以更好地理解它。

这是工作示例：

最终输出：

完整源代码：

import React, { useState, useEffect } from "react";
import "./style.css";
const App = () => {
  const [allusers, setAllusers] = useState([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleName = e => {
    setName(e.target.value);
  };

  const handleEmail = e => {
    setEmail(e.target.value);
  };
  const save = e => {
    e.preventDefault();
    let newUsers = {
      id: Math.floor(Math.random() * 100000),
      name: name,
      email: email
    };
    localStorage.setItem("users", JSON.stringify([...allusers, newUsers]));
    setAllusers(allusers.concat(newUsers));

    console.log("Localstorage:", JSON.parse(localStorage.getItem("users")));
  };

  useEffect(() => {
    console.log("Localstorage:", JSON.parse(localStorage.getItem("users")));
    if (localStorage.getItem("users")) {
      setAllusers(JSON.parse(localStorage.getItem("users")));
    }
  }, []);

  return (
    <div>
      <form>
        <input type="text" name="user" onChange={handleName} />
        <input type="text" name="email" onChange={handleEmail} />
        <button onClick={save}>Save</button>
        <p>{JSON.stringify(allusers)}</p>
      </form>
    </div>
  );
};

export default App;

正如您在评论部分中询问的那样，您可以通过以下方式实现更新功能：

最终输出：

完整源代码：

import React, { useState, useEffect } from "react";
import "./style.css";
const App = () => {
  const [allusers, setAllusers] = useState([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [id, setId] = useState(null);

  const handleName = e => {
    setName(e.target.value);
  };

  const handleEmail = e => {
    setEmail(e.target.value);
  };
  const save = e => {
    e.preventDefault();
    let newUsers = {
      id: Math.floor(Math.random() * 100000),
      name: name,
      email: email
    };
    localStorage.setItem("users", JSON.stringify([...allusers, newUsers]));
    setAllusers(allusers.concat(newUsers));
    console.log("Localstorage:", JSON.parse(localStorage.getItem("users")));
  };

  const setForUpdate = user => {
    setName(user.name);
    setEmail(user.email);
    setId(user.id);
  };

  const update = e => {
    e.preventDefault();
    let modifiedData = allusers.map(user => {
      if (user.id === id) {
        return { ...user, name: name, email: email };
      }
      return user;
    });

    setAllusers(modifiedData);
    localStorage.setItem("users", JSON.stringify(modifiedData));
    setId(null);
  };
  useEffect(() => {
    console.log("Localstorage:", JSON.parse(localStorage.getItem("users")));
    if (localStorage.getItem("users")) {
      setAllusers(JSON.parse(localStorage.getItem("users")));
    }
  }, []);

  return (
    <div>
      <form>
        <input value={name} type="text" name="user" onChange={handleName} />
        <input value={email} type="text" name="email" onChange={handleEmail} />
        <button disabled={!(id == null)} onClick={save}>
          Save
        </button>
        <button disabled={id == null} onClick={update}>
          Update
        </button>
      </form>
      {allusers &&
        allusers.map(user => (
          <div className="userInfo">
            <p>{user.name}</p>
            <p>{user.email}</p>
            <button onClick={() => setForUpdate(user)}>
              select for update
            </button>
          </div>
        ))}
    </div>
  );
};

export default App;

您可以在此处找到工作示例：Stackblitz