在React中保存新旧状态

Question

我有一个状态newuser，它会根据输入字段中的输入而变化，毕竟，输入已填充，并且单击了提交按钮。

我想保持新用户的当前状态，然后当第二次填充输入字段时，我将有另一个状态来保持newuser的前一个值和当前值。

const [newuser,setnewuser] = useState({'firstname':'','lastname':''});
const [users,setusers] = useState([]); <-- this is expected to hold newuser objects as the submit button is clicked

请问，我该如何做到这一点，我试着使用排列运算符setusers(...newuser,newuser)，但没有成功。

Answer 1

正确的解决方案是将旧状态保存到缓存或本地存储之类的地方。对于您的特定代码情况，我们可以使用effect来同步状态

const [newuser,setnewuser] = useState({'firstname':'','lastname':''});
const [users,setusers] = useState([]); 
useEffect(() => {
if(newuser && newuser.firstname && newuser.lastname && !users.includes(newuser)) {
setusers([...users, newuser])
}
}, [JSON.stringify(newuser)]);

如果你想使用正确的解决方案，我可以展示一个使用缓存的简单解决方案，你需要安装"内存缓存">

import cache from 'memory-cache'
const [newuser, _setnewuser] = useState(cache.get('newuser') || {'firstname':'','lastname':''});
const setnewuser = (user) => {
_setnewuser(user);
cache.put('newuser', user);
}