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

问题描述

我正在尝试使用 React 钩子来获取一些数据并显示它，但出现错误:

function App() {const [user, setUser] = React.useState(null);React.useEffect(fetch('https://randomuser.me/api/').then(results => results.json()).then(数据=> {设置用户(数据.结果[0])；}), []);返回 
{用户?user.name.first : '加载中...'}
;}ReactDOM.render(, 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>

未捕获的类型错误:创建不是函数在 commitHookEffectList (react-dom.development.js:15901)在 commitPassiveHookEffects (react-dom.development.js:15911)在 HTMLUnknownElement.callCallback (react-dom.development.js:149)在 Object.invokeGuardedCallbackDev (react-dom.development.js:199)在 invokeGuardedCallback (react-dom.development.js:256)在 commitPassiveEffects (react-dom.development.js:17299)在包装(scheduler-tracing.development.js:204)在flushPassiveEffects (react-dom.development.js:17338)在 dispatchAction (react-dom.development.js:12035)在 eval (index.jsx? [sm]:9)

解决方案

这是因为没有回调函数被传递到 useEffect.在上面的例子中，它实际上是在执行不返回任何内容的 fetch 请求.将 fetch 调用包装在箭头/匿名函数中，它就会起作用.

function App() {const [user, setUser] = React.useState(null);React.useEffect(() => {//传入一个回调函数！fetch('https://randomuser.me/api/').then(results => results.json()).then(数据=> {设置用户(数据.结果[0])；});}, []);返回 
{用户?user.name.first : '加载中...'}
;}ReactDOM.render(, 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>

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)

解决方案

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>

这篇关于Uncaught TypeError: create is not a function using useEffect React Hook with AJAX request的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！