1 answers

0 points

Asked by:

791

Do you know why my handleClick function throws an uncaught error?

my code:

xxxxxxxxxx
 
// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';
​
function App() {
  const [state, setState] = React.useState(0);
​
  function handleClick(type) {
    switch (type) {
      case 'increment':
        setState((state) => state + 1);
      case 'decrement':
        setState((state) => state - 1);
      default:
        throw new Error(type);
    }
  }
​
  return (
    <>
      Count: {state}
      <button onClick={() => handleClick('increment')}>+</button>
      <button onClick={() => handleClick('decrement')}>-</button>
    </>
  );
}
​
const root = document.querySelector('#root');
ReactDOM.render(<App/>, root );

Auto running

stacktrace:

xxxxxxxxxx
 
App.js:19 Uncaught Error: increment
    at handleClick (App.js:19)
    at onClick (App.js:26)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

1 answer

0 points

Answered by:

Mikolaj

519

I found the solution to the problem.

I didn't include break in any of the cases, so all the cases below were executed, including throwing an error.

Here's the solution:

xxxxxxxxxx
 
// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';
​
function App() {
  const [state, setState] = React.useState(0);
​
  function handleClick(type) {
    switch (type) {
      case 'increment':
        setState((state) => state + 1);
        break;
      case 'decrement':
        setState((state) => state - 1);
        break;
      default:
        throw new Error(type);
    }
  }
​
  return (
    <>
      Count: {state}
      <button onClick={() => handleClick('increment')}>+</button>
      <button onClick={() => handleClick('decrement')}>-</button>
    </>
  );
}
​
const root = document.querySelector('#root');
ReactDOM.render(<App/>, root );

Auto running

0 comments Add comment

React - handleClick switch error

Native Advertising

🚀

Dirask - we help you to

solve coding problems.

Ask question.

❤️💻 🙂