从 useState 中移除时对重复项目做出反应

Question

我尝试为我的年终项目制作一个预订应用程序。我不知道为什么我可以在状态中添加一个项目，但是当我尝试删除它并再次添加它时，它被复制了。我做了很多研究，但没有找到答案。

问题在这里：

这是我的代码：


    const [js, setJs] = useState([]);

    const addPlace = (target) => {
    let selectedPlace = document.getElementById(target.id);
    const temporary = js;

    const placeAjouteeASelection = {
      id: target.id,
      key: `${target.id} ${dateUtilisee} ${heureDebutUtilisee} ${heureFinUtilisee}`,
      nom: target.id.split('Place')[1],
      date: dateUtilisee,
      heureDebutUtilisee: heureDebutUtilisee,
      heureFinUtilisee: heureFinUtilisee,
    };

    switch (selectedPlace.getAttribute('fill')) {
      case couleurPlaceReservee:
        alert('place reservée !');
        break;
      case couleurPlaceSelectionnee:
        const toBeDeleted = selectedPlace.id;
        selectedPlace.setAttribute('fill', couleurPlaceDisponible);
        setJs(js.filter((item) => item.id !== toBeDeleted));
        break;
      case couleurPlaceDisponible:
        selectedPlace.setAttribute('fill', couleurPlaceSelectionnee);
        temporary.push(placeAjouteeASelection);
        setJs([...temporary]);
        break;
      default:
        selectedPlace.setAttribute('fill', couleurPlaceDisponible);
        break;
    }
    console.log('TEMPORARY', temporary);
  };

感谢您的帮助。

编辑：

好的，我尝试了您的解决方案，但是现在当您从数组中删除一个元素时，它会删除所有内容，知道吗？我尝试使用过滤器数组。

这是一个小 gif 和我的代码：

    switch (selectedPlace.getAttribute('fill')) {
  case couleurPlaceReservee:
    alert('place reservée !');
    break;
  case couleurPlaceSelectionnee:
    const toBeDeleted = selectedPlace.id;
    selectedPlace.setAttribute('fill', couleurPlaceDisponible);
    const list = js.filter((item) => item.id !== toBeDeleted);
    setJs(list);
    break;
  case couleurPlaceDisponible:
    selectedPlace.setAttribute('fill', couleurPlaceSelectionnee);
    setJs((prev) => {
      return [...prev, placeAjouteeASelection];
    });
    break;
  default:
    selectedPlace.setAttribute('fill', couleurPlaceDisponible);
    break;
}

进入渲染函数：

     {js &&
    js.map((a) => {
      return <li key={a.key}>{a.nom}</li>;
    })}

Answer 1

您应该使用最新的状态变量

case couleurPlaceDisponible:
        selectedPlace.setAttribute('fill', couleurPlaceSelectionnee);
        temporary.push(placeAjouteeASelection);
        setJs(temporary => {return [...temporary]});
        break;

case couleurPlaceSelectionnee:
        const toBeDeleted = selectedPlace.id;
        selectedPlace.setAttribute('fill', couleurPlaceDisponible);
        js.splice(toBeDeleted, 1);
        setJs([...js])
        break;

从 useState 中移除时对重复项目做出反应

react duplicated item when removed from useState

arrays

reactjs

use-state