在复选框单击时反应更新获取

Question

我有一个组件（Card），它具有使用 Postgres 在本地主机数据库中跟踪的复选框。 当我选中或取消选中该框时，会将一个条目放入网络用户表中。 问题是，当我选中或取消选中该框，然后单击一个按钮以呈现不同的组件，然后返回到带有复选框的 Card 组件时，这些框没有显示更新的检查。 但是，如果我注销并重新登录，所有框都会更新并与数据库同步。 那么，一旦在以下组件中更改了复选框，我如何让组件渲染（或再次获取？）？ 泰。

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.不要在任何应用程序状态下存储两个真实来源。 目前，Card 存储自己的状态isChecked ，并且Network上方的某个地方从数据库中获取值并将isChecked传递给 Card 组件。

拥有多个真相来源并不好，通常稍后会回来困扰我们，所以第 1 条规则，不要拥有多个真相来源

Fix #1: remove "isChecked" state from Card.

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）。

流程应该是这样的， event => setState => render => side-effect

1. 用户与某物交互（点击、按下、触摸、聚焦等）
2. 您将新值设置为一个状态（或传递道具，以设置父母的状态......相同）
3. 您呈现更改
4. 在渲染生命周期/挂钩之后，您执行副作用（例如 api 调用）

假设您的卡片组件是独立的，不从道具中获得价值。

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

Answer 2

我相信，问题出在Card的父母身上。 它传递已检查状态 ( props.ischecked ) 的初始值，因此您可能需要通知它有关状态更改的信息，并使您的Card在没有自己的状态的情况下完全受控。

有几种选择如何做到这一点，取决于您使用的状态管理策略。

1. 如果您只是在某个父组件中保持此状态：

const Parent = () => {
  const [ ischecked, setChecked ] = useState(false);

  return (
    <Card ischecked={ ischecked } ... />
  );
}

在这种情况下，提供用于将状态更改为Card组件的回调：

const Parent = () => {
  ...

  return (
    <Card ischecked={ ischecked } onCheckedChange={ setChecked } ... />
  );
}

...

const Card = (props) => {
  ...

    return (
    <div ...>
        ...
        <input
          ...
          checked={props.ischecked}
          onClick={(event) =>
            onUpdateCB(!isChecked, props.loginuser.id, props.id, props.onCheckedChange,event.stopPropagation())
          }
        />
      </div>
    </div>
  );
}

2. 如果你使用 Redux 来管理状态 - 将复选框状态移动到 redux：

import { setChecked } from './actions';

const Card = props => {
  // the same as above
}

export default connect(state => ({
  ischecked: state.ischecked
}), {
  onCheckedChange: setChecked
})(Card);

PS 另外，您的onUpdateCB()方法中有一个拼写错误 - 您应该使用一个函数作为承诺回调：

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

目前你只是在同一时刻设置了检查状态。

Answer 3

让我仔细澄清一下。

第一个渲染。

1. Card 的 ischecked prop 是由父组件 NetworkArray 给定的。 假设那一刻它是假的。
2. 在子组件 Card 中，它初始化了一个名为 isChecked 的本地状态，其初始值与属性 ischecked(false) 相同，并包装了一些逻辑以通过用户操作和 API 响应更新状态。 经过一系列用户操作后，假设最终更改为true 。 在代码中，只有本地状态更新了，但父级中的 prop 保持不变。

第二次渲染。 然后第二次渲染相同的 Card，prop ischecked再次为 false，在 Card 中，由于计算的本地状态 isChecked 为 false，因此未选中。

所以我们看到了 Card 没有显示更新的isChecked的原因，因为 prop ischecked没有改变。

解决这个问题的方法是确保 prop ischecked被成功更新，而不仅仅是本地状态。 我不确定如何在您的代码中进行这项工作，因为ischecked是由许多其他道具计算的，请尝试自己制作并祝您好运。

最后，为什么退出登录后没有出现问题？ 因为通过这种方式，父级中的道具完全重新加载了更新的数据，包括ischecked相关片段。 所以你得到了复选框的更新值。 而已。

Answer 4

在 React 中，当组件被卸载时，它会丢失其内部状态。

因此，当您返回时，必须确保 Card 中的props.ischecked具有更新的值，该值来自上面的 NetworkArray network属性。

因此，当您返回该组件时，您需要确保该network道具在完成fetch后有所不同。

通常，在 NetworkArray 之上，您会在 ComponentDidMount 中获取更新网络属性的数据。

以下是整个代码的样子：

import React, { useState } from "react";
import Card from "./Card";


class ComponentAboveNetworkArray extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
       /* ... */
       network: []
    }
  }

  componentDidMount() {
     fetch('http://localhost:3000/cb')
       .then(response => response.json())
       .then(json => this.setState({network: json.network}))
  }

  return (
    <NetworkArray /* ... */ network={this.state.network} />
  )
}


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

  const cardComponent = network.map((user, i) => {
      const ischecked = networkusers.some(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}
            handleClick={handleClick}
            id={network[i].id}
            loginuser={loginuser}
         />
       );
     });
  return <div>{cardComponent}</div>;
};

export default NetworkArray;