无法在React App中使用Knex JS进行提取

问题描述 投票:0回答:1

我有一个带复选框的组件,我正在使用postgres跟踪本地db。当我选中复选框时,会将一行插入到netowrkusers表中,其中id列中的登录用户为id,而connections列中已检查的用户的id。如果未选中,它将删除该行。它似乎间歇性地工作,但我不断收到“无法提取”错误,最终数据库无法正确跟踪已选中和未选中的框。知道Knex的人能否看到代码中是否存在缺陷?这是我正在使用的Knex.js代码。

app.post("/cb", (req, res) => {

  const { loginuser, userid, ischecked } = req.body;

  if (ischecked) {

    console.log("flag is true");
    db.transaction(trx => {
      trx
        .insert({
          id: loginuser,
          connections: userid
        })
        .into("networkusers")
        .returning("id", "connections")
        .then(() => {
          console.log("committing");
          trx.commit();
        })
        .catch(error => {
          console.log("error", error);
          trx.rollback();
        });
    }).catch(err => res.status(400).json(err));
  } else {

    console.log("flag is false");
    db.transaction(trx => {
      db("networkusers")
        .where("id", "=", loginuser)
        .andWhere("connections", "=", userid)
        .del()
        .returning("id", "connections")
        .then(() => {
          console.log("committing");
          console.log(loginuser,userid)
          trx.commit();
        })
        .catch(error => {
          console.log("error", error);
          trx.rollback();
        });
    }).catch(err => res.status(400).json(err));
  }
});

这是具有复选框逻辑的组件:

import React, { useState } from "react";

const onUpdateCB = (ischecked, loginuser, userid, setisChecked,handleCheck) => {

  console.log(ischecked, loginuser, userid);

  fetch('http://localhost:3000/cb', {
      method: 'post',
      headers: {'Content-Type':'application/json'},
      body:JSON.stringify({
      loginuser,
      userid,
      ischecked: ischecked
    })
  }).then(setisChecked(ischecked));
  return

};


const Card = props => {
  const [isChecked, setisChecked] = useState(props.ischecked);
  return (
    <div
      className="pointer bg-light-green dib br3 pa3 ma2 shadow-5"
      onClick={() => props.handleClick(props.id)}

    >
      <div>
        <h3>{props.name}</h3>
        <p>{props.company}</p>
        <p>{props.phone}</p>
        <p>{props.email}</p>
        <p>{props.city}</p>
      </div>
      <div>
        My Network
        <input
          className="largeCheckbox"
          type="checkbox"
          checked={isChecked}
          onChange={() =>
            onUpdateCB(!isChecked, props.loginuser.id, props.id, setisChecked,props.handleCheck)
          }
        />
      </div>
    </div>
  );
};

export default Card;

NetworkArray组件:

import React from "react";
import Card from "./Card";

const NetworkArray = ({
  network,
  networkusers,
  handleChange,
  handleClick,
  loginuser
}) => {
  console.log("in network array", networkusers);

  const cardComponent = network.map((user, i) => {
    const ischecked = networkusers.filter(n => {

      var nw = n.id === loginuser.id && n.connections === network[i].id;

      return nw;
    });

    console.log("is it checked", ischecked);

    return (
      <Card
        key={network[i].id}
        name={network[i].firstname + " " + network[i].lastname}
        company={network[i].company}
        phone={network[i].phone}
        email={network[i].email}
        city={network[i].city}
        ischecked={ischecked.length}
        handleChange={handleChange}
        handleClick={handleClick}
        id={network[i].id}
        loginuser={loginuser}
      />
    );
  });
  return <div>{cardComponent}</div>;
};

export default NetworkArray;
reactjs database postgresql localhost knex.js
1个回答
0
投票

这看起来不太正确:

db.transaction(trx => {
  db("networkusers")
    .where("id", "=", loginuser)

通常,您会这样做:

db.transaction(trx => {
  trx("networkusers")
    .where("id", "=", loginuser)

或:

db.transaction(trx => {
  db("networkusers")
    .where("id", "=", loginuser)
    .transacting(trx)

我怀疑问题是您只是没有一直使用事务对象。参见overview

您还应该在数据库操作成功之后进行响应(不仅仅是失败时)。像这样:

db
  .transaction(trx => {
    // ...query...
  })
  .then(() => res.json({ message: 'Success.' }))
  .catch(err => res.status(400).json(err));
© www.soinside.com 2019 - 2024. All rights reserved.