复选框单击时获取更新更新

Question

我有一个组件（卡），该组件具有使用Postgres在localhost数据库中跟踪的复选框。当我选中或取消选中该框时，条目将被放入networkusers表中。问题是，当我选中或取消选中该框，然后单击一个按钮以呈现其他组件，然后使用复选框返回到Card组件时，这些框未显示更新后的复选框。但是，如果我注销并重新登录，则所有框都将更新并与数据库同步。因此，如何更改以下组件中的复选框，如何使该组件呈现（或再次获取？）？ TY。

import React, { useState } from "react";

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

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

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)}
      //onClick={(e) => e.stopPropagation()}

    >
      <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}
          onClick={(event) =>
            onUpdateCB(!isChecked, props.loginuser.id, props.id, setisChecked,event.stopPropagation())
          }
        />
      </div>
    </div>
  );
};

export default Card;

网络阵列

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("i'm 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

我相信，问题出在Card的父母中。它传递检查状态的初始值（props.ischecked），因此您可能需要将状态更改通知它。

[您也要在onUpdateCB()方法中输入错误-您应该使用函数作为Promise回调：

 }).then(
  () => setisChecked(ischecked)
); 

当前您只是同时设置了选中状态。