我正在尝试使用 React hooks 并按照 https://www.valentinog.com/blog/hooks/ 上的教程进行操作。 。我将空数组作为文档后面的第二个参数放入,出于某种原因我仍然遇到无限循环。
import React, { useState, useEffect } from "react";
export default function useDataLoader() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("http://api.icndb.com/jokes/random")
.then(response => response.json())
.then(data => {
setData(data.value.joke)
console.log(data)
}, []);
});
return (
<div>
<div>
{data}
</div>
</div>
);
}
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Hook from './components/Hook'
import DataLoader from './components/DataLoader'
class App extends Component {
render() {
return (
<div className="App">
<Hook />
<DataLoader/>
</div>
);
}
}
export default App;
最佳答案
[]
位置错误。您将其传递给 fetch().then()
而不是 useEffect
useEffect(() => {
fetch("http://api.icndb.com/jokes/random")
.then(response => response.json())
.then(data => {
setData(data.value.joke)
console.log(data)
});
}, []);
关于javascript - React js钩子(Hook)useEffect无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55328686/