reactjs - 在复选框单击上 react 更新获取

Question

我有一个组件(卡)，它具有使用 Postgres 在本地主机数据库中跟踪的复选框。当我选中或取消选中该框时，一个条目将被放入网络用户表中。问题是，当我选中或取消选中该框，然后单击按钮呈现不同的组件，然后返回带有复选框的 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

首先，在 React 应用程序中您必须遵循两个原则。

<强>1。不要在任何应用程序状态中存储两个事实来源。 目前，卡存储其自己的状态 isChecked，并且 Network 上方的某个位置已从数据库获取值并将 isChecked 传递给卡组件也是如此。

拥有多个事实来源并不好，并且通常会在以后困扰我们，所以规则第一。，不要有多个事实来源

修复#1:从卡中删除“isChecked”状态。

import React, { useState } from "react";

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

  console.log(ischecked, loginuser, userid);

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

const Card = props => {
  const { ischecked } = props;
  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)
          }
        />
      </div>
    </div>
  );
};

export default Card;

....实际上第一个主体应该足以解决你的问题。但如果你好奇的话。

<强>2。在渲染后产生副作用(componentDidMount、componentDidUpdate、useEffect)。

流程应该是这样的， 事件 => setState => 渲染 => 副作用

1. 用户与某物交互(点击、按下、触摸、聚焦等)
2. 您为状态设置新值(或传递 Prop ，设置父级的状态...相同相同)
3. 您进行更改
4. 在渲染生命周期/ Hook 之后，您执行副作用(例如 API 调用)

假设您的卡片组件是独立的，不会从 Prop 中获得值(value)。

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

const Card = props => {
  const [data, setData] = useState({});

  // 2: set new state
  const onSelectCheckbox = (ischecked) => {
    const newData = { ...data, ischecked };
    setData(newData);
  }

  useEffect(() => {
    // 4. Watch if data.ischecked change, if yes perform side effect (call api)
    onUpdateCB(data.ischecked, props.loginuser.id, props.id);
  }, [data.ischecked]);

  // 3. re-render when data change.
  const { name, company, phone, email, city, ischecked } = data;
  return (
    <div className="pointer bg-light-green dib br3 pa3 ma2 shadow-5">
      <div>
        <h3>{name}</h3>
        <p>{company}</p>
        <p>{phone}</p>
        <p>{email}</p>
        <p>{city}</p>
      </div>
      <div>
        My Network
        <input
          className="largeCheckbox"
          type="checkbox"
          checked={ischecked}
          onClick={(event) =>
            onSelectCheckbox(!isChecked) // 1. User interact with checkbox
          }
        />
      </div>
    </div>
  );
};