分享程序员开发的那些事...
更新时间：2022-12-12 22:23:11
这是因为没有回调函数被传递到 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(
<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>