React：如何在事件处理程序中调用react hooks？

Question

我在反应功能组件中有以下代码。当我单击按钮并运行处理程序时，出现错误：

无效的挂钩调用。钩子只能在函数组件的主体内部调用。

const handleClick = () => {
  const [count, setCount] = useState(x); // this is wrong
};

我尝试寻找修复方法，有人建议：

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(x); // setCount is ok, but I cannot set other dynamic states
};

但是，我的

count

状态是动态的，我无法从一开始就初始化所有内容。当我使用类组件时，这很容易。

// old syntax from class components
state = {
  count: 0
};

const handleClick = () => {
  this.setState({
    other_count: x
  })
};

功能组件如何达到同样的效果？

Answer 1

如果您想动态使用

state

，请将

object

用作

state

。

记住不变性。

const [state, setState] = useState({ count: 0 });

const handleClick = () => {
  setState({...state, other_count: x });
}

Answer 2

您可以使用多个状态或单个状态下的对象。

第一种方式：

const [count, setCount] = useState(0);
const [otherCount, setOtherCount] = useState(0);

const handleClick = () => {
  // count is already available to you.. so update the other state
  setOtherCount(x);
};

第二种方式：

const [compState, setCompState] = useState({ count: 0, other_count: 0 });

const handleClick = () => {
  setCompState(prevState => { ...prevState, other_count: x });
};

第二种方式

DEMO。