反应从子组件重新渲染父组件不起作用

Question

I have a parent component (DevicePage) that loads multiples of a child component (Device). In the child component, I have buttons to check-in and check-out a device. When I click on the buttons on the DevicePage, the page doesn't re-render and the button states don't change.

I've tried some suggested answers where you pass a function to the child that the child can call to update a state on the parent (see here How to re-render parent component from child component ) but it doesn't work in my case and not sure why.

Here's what I have:

Parent

  const [devices, setDevices] = useState();
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(1)
    DeviceService.getAll()
      .then(res => {
        if(res.data.length > 0) {
          setDevices(res.data);
        }
      });
  }, [])

  function checkoutDevice(id) {
    console.log("About to checkout device");
    DeviceService.checkoutDevice(id)
      .then(res => {
        console.log("Device checked out")
      })
      .catch(err => "Error checking out device: " + err);
  }

  function checkinDevice(id) {
    DeviceService.checkinDevice(id)
      .then(res => {
        console.log("Device checked in")
      })
      .catch(err => "Error checking out device: " + err);
  }

  function devicesList() {
    if(devices) {
      return devices.map(currDevice => {
        return <Device device={currDevice} checkoutDevice={checkoutDevice} checkinDevice={checkinDevice} key={currDevice._id} />;
      });
    }
  }

  return (
    <div>
      <table className="table">
        <thead className="thead-light">
          <tr>
            <td>Tag</td>
            <td>Category</td>
            <td>Make</td>
            <td>Model</td>
          </tr>
        </thead>
        <tbody>
          {devicesList()}
        </tbody>
      </table>
    </div>
  )
}

Child

return (
    <tr>
    <td><Link to={"/devices/" + props.device._id}>{props.device.tag}</Link></td>
    <td>{props.device.category}</td>
    <td>{props.device.make}</td>
    <td>{props.device.modelName}</td>
    {
      props.device.available?
        <>
          <td>
            <button type="button" className="btn btn-primary" onClick={() => {props.checkoutDevice(props.device._id)}}>Checkout</button>
          </td>
        </>
        :
        <>
          <td>
            <button type="button" className="btn btn-primary" onClick={() => {props.checkinDevice(props.device._id)}}>Checkin</button>
          </td>
        </>
    }
    {
      currUser.isAdmin?
        <>
          <td>
            <Link to={{pathname: "/devices/edit/" + props.device._id, 
              state: {
                tag: props.device.tag
              }}}>
              edit
            </Link>
          </td>
        </>
      : 
        null
    }
  </tr>
  )

Answer 1

Your problem is "the page doesn't re-render and the button states don't change.", and my assumption is when you click on "Checkout" button, you want it to change to "Checkin" button and vice versa. Look at this code block in the Device component:

    {
      props.device.available?
        <>
          <td>
            <button type="button" className="btn btn-primary" onClick={() => {props.checkoutDevice(props.device._id)}}>Checkout</button>
          </td>
        </>
        :
        <>
          <td>
            <button type="button" className="btn btn-primary" onClick={() => {props.checkinDevice(props.device._id)}}>Checkin</button>
          </td>
        </>
    }

With this logic, in order to change the button, you have to change the device.available, which your code above doesn't. To do that I would recommend 2 solutions:

1. Lazy way, with bad performance: after call checkin/checkout api success, fetch the whole device list again
2. More work but better: after checkin/checkout api call success, update the device list and setDevices again.