Uncaught TypeError:create不是一个使用useEffect React Hook和AJAX请求的函

Question

我试图使用React钩子来获取一些数据并显示它，但遇到了一个错误：

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)

Answer 1

这是因为没有回调函数被传递到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/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>

Answer 2

useEffect必须有一个回调函数。在这种情况下，您可以在括号内使用箭头/匿名函数。useEffect(()=>{your code})