javascript - React: How to call react hooks inside the event handler? - Stack Overflow

admin管理员组

文章数量:1344316

I have the following code inside a react functional ponent. When I click the button and run the handler, an error occurs:

Invalid hook call. Hooks can only be called inside of the body of a function ponent.

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

I tried to search for the fix, someone suggests:

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

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

However, my count state is dynamic and I cannot initialize all from start. When I use class ponents, it was easy.

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

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

How to achieve the same effect for functional ponents?

I have the following code inside a react functional ponent. When I click the button and run the handler, an error occurs:

Invalid hook call. Hooks can only be called inside of the body of a function ponent.

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

I tried to search for the fix, someone suggests:

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

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

However, my count state is dynamic and I cannot initialize all from start. When I use class ponents, it was easy.

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

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

How to achieve the same effect for functional ponents?

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Jul 11, 2024 at 2:02 Dale K 27.5k1515 gold badges5858 silver badges8383 bronze badges asked Oct 21, 2019 at 5:29 54136680605413668060 33622 silver badges1616 bronze badges 4

• Can you post your package.json? – Oleg Levin Commented Oct 21, 2019 at 5:33
• can you post your whole ponent – cjbt Commented Oct 21, 2019 at 5:34
• "react": "^16.9.0", "react-dom": "^16.9.0", "react-redux": "^7.1.1", "react-router-dom": "^5.0.1", "react-scripts": "2.1.8" – 5413668060 Commented Oct 21, 2019 at 5:35
• Is other_count a puted key? – Joseph D. Commented Oct 21, 2019 at 5:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

if you want to use state dynamically, use object as state.

Keep in mind with the immutability.

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

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

You can use multiple states or an object in a single state.

First way:

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);
};

Second way:

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

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

DEMO for the second way.

本文标签： javascriptReact How to call react hooks inside the event handlerStack Overflow