我正在尝试使用 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(使用前将#替换为@)