Reactjs 在React应用程序中使用Knex JS获取失败

我有一个带有复选框的组件，我通过使用postgres的localhost 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;

import React，{useState}来自“React”；
const onUpdateCB=（ischecked、logiuser、userid、setisChecked、handleCheck）=>{
log（ischecked、logiuser、userid）；
取（'http://localhost:3000/cb', {
方法：“post”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify({
登录用户，
用户ID，
ischecked：ischecked
})
}).然后（设置检查（设置检查））；
回来
};
康斯特卡=道具=>{
const[isChecked，setisChecked]=useState（props.isChecked）；
返回(
props.handleClick（props.id）}
>
{props.name}
{props.company}

{props.phone}

{props.email}

{props.city}

我的网络
onUpdateCB（！isChecked，props.logiuser.id，props.id，setisChecked，props.handleCheck）
}
/>
);
};
导出默认卡；

网络阵列组件：

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;

从“React”导入React；
从“/Card”导入卡片；
常量网络数组=({
网络
网络用户，
handleChange，
handleClick，
登录用户
}) => {
console.log（“在网络阵列中”，networkusers）；
const cardComponent=network.map（（用户，i）=>{
const ischecked=networkusers.filter（n=>{
var nw=n.id==logiuser.id&&n.connections===network[i].id；
返回西北方向；
});
console.log（“是否已检查”，是否已检查）；
返回(
);
});
返回{cardComponent}；
};
导出默认网络数组；

这看起来不太正确：

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

通常你会：

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

或：

我怀疑问题在于您只是没有始终如一地使用事务对象。看

您还应该在数据库操作成功后（而不仅仅是在失败时）做出响应。比如：

db
  .transaction(trx => {
    // ...query...
  })
  .then(() => res.json({ message: 'Success.' }))
  .catch(err => res.status(400).json(err));

---

里奇，我两个都试过了。在控制台的网络选项卡中，cb路由显示挂起，然后失败。但当我选中复选框时，它仍然会插入记录，而当我取消选中时，它会删除记录。所以不知道它是怎么工作的？它可能是组件中的某个东西，还是仅仅与Knex呼叫有关？哦，我注意到，当没有错误时，您也从不以“快乐路径”进行响应？应该有一个

res.json（{ok:true}）

或者对客户端的一些类似响应。我最终浏览了文档，简化了代码并使其正常工作。我最终没有使用事务，这似乎太难了。谢谢。

db
  .transaction(trx => {
    // ...query...
  })
  .then(() => res.json({ message: 'Success.' }))
  .catch(err => res.status(400).json(err));