React Hook - Преобразование из класса в ловушки - Тернарный оператор

Question

Я бы хотел изменить это на формат или функцию ловушки.

КОД

updateRoom(roomId){
  if (roomId === '') {
    this.setState({RoomId: '', Room: ''})
  } else {
  this.setState({RoomId: roomId.key, Room: roomId.name});
  }
 }

Чего мне не хватает в моем троичном операторе?

И нужно ли мне изменить имя моей функции на useUpdateRoom для представления функции перехвата?

HOOK

function UpdateRoom(roomId) {
  return '' ? setRoomId : Room
}

function App() {

  const [rooms, setRooms]   = useState('');
  const [roomId, setRoomId] = useState('');
  const [user, setUser]     = useState('');


return (
  <div className="app">
  <div className="room">
  {rooms.map((room, index) => (
    <Room key={index} index={index} room={room} />

  ))}
 </div>
 </div>
 )
}

Answer 1

ваша троица не оценивает roomId. Я также переименовал параметр в «id» для ясности. Должно быть:

function App() {
  const [rooms, setRooms]   = useState('');
  const [roomId, setRoomId] = useState('');
  const [user, setUser]     = useState('');

  function updateRoom(id) {
    return id === '' 
      ? setRoomId('')
      : setRoomId(id)
  }

  return (
    <div className="app">
      <div className="room">
      {rooms.map((room, index) => (
        <Room key={index} index={index} room={room} />
      ))}
    </div>
  </div>
  )
}

Кроме того, вам нужно поместить функцию внутри приложения, чтобы она имела доступ к setRoomId.

Наконец, я не вижу, куда вы звоните, но это будет что-то вроде:

<button onClick={() => updateRoom(some_id)}>Change Room</button>