如何解决为什么时间戳不保存到React状态对象?
我正在尝试将日期另存为Firebase中的时间戳,但是由于某些原因,时间戳无法保存到表单onChange处理程序中的状态...
const [event,setEvent] = useState({});
function handleDate(e) {
e.persist();
let d = e.target.value;
console.log('date1',d); //date1 2020-10-13
let dd = new Date(d);
console.log('date2',dd); // Tue Oct 13 2020 02:00:00 GMT+0200 (Central European Summer Time)
let ddd = dd.getTime() / 1000;
console.log('timestamp ',ddd); // timestamp 1602547200
setEvent({...event,date_ts: ddd});
console.log('event timestamp',event.date_ts); //null
setEvent({...event,date: e.target.value});
console.log('event date',event.date); // empty string
}
最后,event.date属性正确保存,但是event.date_ts为null。为什么?? 其次...为什么处理程序中的“事件日期”控制台日志为空字符串,但日期得到保存? 谢谢
编辑:
现在非常简单的Firebase保存:
const saveNewEvent = (e) => {
e.preventDefault()
console.log("save event",event) //HERE the time_ts is "null"
firebase.firestore().collection(event.category).add({
event
})
setEvent({ ...defalut_event })
}
...所以看起来好像有些React怪异,与Firebase无关...(或者可能是我的无能,而不是;)
解决方法
您可以阅读this了解更多信息。
基本上在执行此操作时:
setEvent({ ...event,date_ts: ddd })
Reactjs不会立即更新event
对象。出于性能原因,它将批量处理多个setEvent
,并调用一次render
。
因此,当您致电此电话时:
console.log("event timestamp",event.date_ts) //null
event
并不是您在上一行中设置的最新值。
如果要获取最新价值,则需要使用生命周期挂钩,如here所述。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。