Блог

У меня есть секундомер в react.js . После окончания работы секундомера пользователь может занести свое время в базу данных. В index.js файл, который я вызываю <App /> , находится ниже, вместе с util.js .

App.js

 import React from 'react';
import { addName } from "./util";

function App() {
  const [name, setName] = React.useState("")

  function handleUpdate(evt) {
    setName(evt.target.value);
  }

  async function handleAddName(evt) {
    await addName(name);
  }

  return <div>
    <p><input type='text' value={name} onChange={handleUpdate} /></p>
    <button className='button-style' onClick={handleAddName}>Add Name</button>
  </div>
}

export default App;
 

util.js

 import "isomorphic-fetch"

export function addName(name) {
    return fetch('http://localhost:3001/addtime', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, time: Date.now() })
    })
}
 

Он помещает их имя и время в базу данных, но это странные времена.

Каждое из этих значений времени составляло от 1 до 2 секунд на секундомере. У меня в моем узле есть следующее server.js файл:

 app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
...
app.post("/addtime", cors(), async (req,res) => {
    const name = req.body.name;
    const time = req.body.time;
    // const timeStamp = dateFormat(time, dateFormat.masks.isoDateTime);
    
    const template = 'INSERT INTO times (name,time) VALUES ($1,$2)';
    const response = await pool.query(template, [name,time]);
    
    res.json({name: name, time: time});

});
 

Я не могу понять, почему он помещает эти странные числа в базу данных

Таким образом, числа, которые вы видите в базе данных, — это просто миллисекунды с 1 января 1970 года 00: 00:00 UTC, что является полезным числом, которое вы будете использовать довольно часто, когда отслеживаете, когда что-то произошло. Прямо сейчас я получаю 1610330957356 . Таким образом, число не является необычным.

Однако я подозреваю, что проблема, с которой вы столкнулись, скорее всего, связана с логикой, и я предполагаю, что вы ожидаете увидеть число порядка секунд (возможно, в миллисекундах), поскольку вы упомянули, что это какой-то секундомер, что означает, что вам нужно отправить разницу во времени с начала, когдасекундомер запускается, пока он не остановится.

То, как вы это сделаете, все равно будет использоваться Date.now() , но способом, описанным ниже.

 const start_time = Date.now(); // 1610330952000
// ... wait for stopwatch to stop or other events ...
// when the stop has triggered you need
const stop_time = Date.now(); // 1610330957000 after exactly 5 seconds of waiting
const difference = stop_time - start_time // 5000 for 5 seconds
 

Тогда ваше тело вместо этого будет JSON.stringify({ name, time: difference })

Естественно, вы можете сжать их в меньшее количество строк, но я просто хотел, чтобы шаги были понятными.

Редактировать: для большей ясности вот что, по словам документов, возвращается

Число, представляющее миллисекунды, прошедшие с эпохи UNIX.

Date.now Документация из MDN