обновить состояние из другой функции с помощью useState

Question

const Room = (props) => {
  const [hasError, setErrors] = useState(false);
  const [rooms, setRooms] = useState([]);

  return (
      <div> <a onClick={() => deleteRoom()}</div>
    )
}

const deleteRoom = () => {
  //How to update setRooms here
}

Как обновить setRooms в методе deleteRoom?

Answer 1

Вам просто нужно определить функцию deleteRoom внутри компонента Room.

const Room = (props) => {
  const [hasError, setErrors] = useState(false);
  const [rooms, setRooms] = useState([]);



  const deleteRoom = () => {
    setRooms(...);
  }

  return (
      <div> <a onClick={() => deleteRoom()}</div>
  )
}

Answer 2

Вы можете передать setRooms в качестве аргумента в deleteRoom и вызвать его там.

Например,

const Room = (props) => {
  const [hasError, setErrors] = useState(false);
  const [rooms, setRooms] = useState([]);

  return (
      <div> <a onClick={() => deleteRoom(setRooms)}</div>
    )
}

const deleteRoom = (setRooms) => {
  //How to update setRooms here
  setRooms(...)
}

Answer 3

У вас есть 2 варианта:

1. Поместите свой метод deleteRoom в компонент Room

const Room = (props) => {
  const [hasError, setErrors] = useState(false);
  const [rooms, setRooms] = useState([]);


  const deleteRoom = () => {
    ... use your state..
  }

  return (
      <div> <a onClick={() => deleteRoom()}</div>
    )
}

Передайте свои useState функции в deleteRoom в качестве аргументов.

const Room = (props) => {
  const [hasError, setErrors] = useState(false);
  const [rooms, setRooms] = useState([]);


  return (
      <div> <a onClick={() => deleteRoom(setRooms, setErrors)}</div>
    )
}

const deleteRoom = (setRooms, setErrors) => {
  you can use setRooms() and setErrors() here
}