时间戳

首页 > 解决方案 > 使用 redux 在秒表上花点时间并将其放入数据库

javascript - 使用 redux 在秒表上花点时间并将其放入数据库

问题描述

有人建议我使用 redux 将时间放入数据库，但我遇到了问题。我的 index.js 中有一个秒表，用户可以启动和停止。之后，我有一个按钮，让他们能够将时间放入数据库。从我的节点文件中，我得到UnhandledPromiseRejectionWarning: error: null value in column "time" violates not-null constraint. 我想知道我是否得到了这个，因为我difference = 0在索引文件的停止处并且它没有检索difference = this.state.endTime - this.state.startTime;，或者我没有看到另一个问题。

index.js

export let difference = 0;

export default class Home extends React.Component {
  constructor(props);
    super(props);
    this.state = {
      startTime: 0,
      endTime: 0,
    }
  }

  handleStart = () => {
    this.setState({
      startTime: Date.now()
    })
  }

  handleStop = () => {
    this.setState({
      endTime: Date.now()
    })
  }

  render() {
    difference = this.state.endTime - this.state.startTime;
    return (
      <App />
      <reducer />
    );
  }
}

减速器.js

import * as actionTypes from "./actions.js";
import difference from "../pages/index.js";

const initialState = {
    count: 0
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.NUMBER:
            return { state, count: difference };
        default: return state;
    }
};

export default reducer;

store.js

import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);






export default store;

动作.js

export const NUMBER = 'NUMBER';

应用程序.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;

实用程序.js

import "isomorphic-fetch"
import difference from "../pages/index.js";

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

节点服务器.js

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});

});

标签： javascriptnode.jsreactjsredux

解决方案

您可能不会将任何值保存到 DOB 列，您需要允许 NULL 值。您应该更改为 DOB = models.DateField(auto_now = False, null = True) 您还应该确保表中的 DOB 列允许为空。

推荐阅读