Uncaught TypeError: create is not a function using useEffect React Hook with AJAX request

user_1751946 0
Viewed 23833

I'm trying to use React hooks to fetch some data and display it, but am getting an error:

function App() {
  const [user, setUser] = React.useState(null);
  React.useEffect(fetch('https://randomuser.me/api/')
    .then(results => results.json())
    .then(data => {
      setUser(data.results[0]);
    }), []);
  
  return <div>
    {user ? user.name.first : 'Loading...'}
  </div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

Uncaught TypeError: create is not a function
    at commitHookEffectList (react-dom.development.js:15901)
    at commitPassiveHookEffects (react-dom.development.js:15911)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitPassiveEffects (react-dom.development.js:17299)
    at wrapped (scheduler-tracing.development.js:204)
    at flushPassiveEffects (react-dom.development.js:17338)
    at dispatchAction (react-dom.development.js:12035)
    at eval (index.jsx? [sm]:9)
react-hooks reactjs javascript
2 Answers

It's because no callback function is being passed into useEffect. In the example above, it is actually executing the fetch request which doesn't return anything. Wrap the fetch call in an arrow/anonymous function and it will work.

function App() {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => { // Pass in a callback function!
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
    });
  }, []);
  
  return <div>
    {user ? user.name.first : 'Loading...'}
  </div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

user_17519460

useEffect must have a callback function. In this case you can use an arrow/anonymous function inside the brackets. useEffect(()=>{your code})

user_153099290
Related