在 React App 中使用 Knex JS 获取失败

Question

我有一个带有复选框的组件，我使用 postgres 通过本地主机数据库跟踪它。当我选中复选框时，将在 table netowrkusers 中插入一行，其中 id 列中包含登录用户 id，连接列中已选中的用户 id。未选中时它会删除该行。它似乎间歇性地工作 - 但我不断收到 'failed to fetch' 错误，最终数据库无法正确跟踪选中和未选中的框。知道 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;

Answer 1

这看起来不太正确：

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

在 React App 中使用 Knex JS 获取失败

Failed to Fetch using Knex JS in in React App

reactjs

database

postgresql

localhost

knex.js