javascript - React JS：状态改变时返回（）中的HTML不会重新加载？

Question

我有一个项目表，并希望允许用户切换一个“收藏夹”复选框，该复选框将添加/删除收藏夹表。由于切换复选框将从名为“收藏夹”的状态数组（从收藏夹表组件中读取）中添加/删除项目，因此我使用状态收藏夹数组来设置每个复选框的选中属性以维护当状态收藏夹数组更新并重新加载页面时进行持久检查：

<td><input type="checkbox" id={establishment.FHRSID} onChange={handleFavouriteClick} checked={favourites.some(favourite => favourite.BusinessName == establishment.BusinessName) ? true : false}></input></td>

从状态收藏夹数组中添加/删除项目的函数：

  function handleFavouriteClick(){
    if(document.getElementById(establishment.FHRSID).checked == true){
      console.log('favourites: ', [...favourites, establishment])
      setFavourites([...favourites, establishment]);
    }else{
      var temp_favourites = favourites;
      var index = temp_favourites.findIndex(x => x.BusinessName === establishment.BusinessName);
      if (index > -1) {
        temp_favourites.splice(index, 1);
        console.log('favourites: ', temp_favourites)
      }
      
      setFavourites(temp_favourites);

    }
  }

但是这样做不允许我取消选中该复选框。正如我可以通过控制台日志确认的那样，该项目已从收藏夹数组中删除，但是当从收藏夹中删除该项目时，HTML 复选框永远不会重新加载，但在添加项目时它会重新加载。

有人可以建议我可能做错了什么吗？

谢谢

标签： javascriptreactjsreact-hooksstate