javascript - 为什么时间戳不保存到 React 状态对象？

Question

我正在尝试将日期保存为 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 为空。为什么？？其次......为什么来自处理程序的“事件日期”控制台日志是一个空字符串，但日期被保存？谢谢

编辑：

现在是非常基本的 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 无关...（或者可能是我的无能，而是；）

标签： javascriptreactjsreact-state

Answer 1

您可以阅读此内容以获取更多信息。

基本上当你执行这个时：

setEvent({ ...event, date_ts: ddd })

Reactjs 不会event立即更新对象。出于性能原因，它将批量处理多个setEvent并调用render一次。

所以当你这样称呼时：

console.log("event timestamp", event.date_ts) //null

event还不是您在上一行中设置的最新值。

如果要获取最新值，则需要使用生命周期挂钩，如此处所述。