Блог

У меня есть следующий код, который должен проверять, существует ли объект в состоянии, и заменять его, а если нет, добавлять его в состояние. Пока добавление к состоянию работает корректно, но при замене объекта пользовательский интерфейс соответствующим образом не обновляется.

 const [roomData, setRoomData] = useState([]);
 .............
onSelectRoom={(room) => {
  let roomIndex = roomData.findIndex(
    (room) => room.roomId == item.id
  );
  roomData[roomIndex]
    ? (roomData[roomIndex] = room)
    : setRoomData([...roomData, room]);
  setRoomTotals([]);
}}
  

Он не обновляется должным образом, потому что вы напрямую изменяете состояние. Вам нужно либо создать копию состояния и изменить его, либо обновить состояние, например:

 const newState = [...roomData];
newState[roomIndex] = room;
setRoomData(newState);
  

или вы можете попробовать что-то вроде:

 roomData[roomIndex] ? setRoomData(roomData.map((data,i)=>{
  if(i === roomIndex){
    return room
  }
  return data;
}) : setRoomData([...roomData, room]);
  

Примечание : вам не разрешено изменять состояние напрямую .

Это должно сработать с помощью функционального программирования.

   const onSelectRoom = (room) => {
    setRoomData((prev) =>
      prev.find((r) => r.id === room.id)
        ? prev.map((r) => (r.id === room.id ? room : r))
        : prev.concat(room)
    );
  };