使用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>
    )
}

1. 将您的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
}