未捕获的类型错误:create 不是使用 useEffect React Hook 和 AJAX 请求的函数

2024-02-14

我正在尝试使用 React hooks 来获取一些数据并显示它,但收到错误:

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/[email protected] /cdn-cgi/l/email-protection/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/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)

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

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/[email protected] /cdn-cgi/l/email-protection/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/umd/react-dom.development.js"></script>

<div id="app"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

未捕获的类型错误:create 不是使用 useEffect React Hook 和 AJAX 请求的函数 的相关文章

随机推荐