setInterval 调用功能组件中的钩子在 ReactJS 中使用钩子

Question

在ReactJs应用程序中，下面的演示中使用了setInterval。目前，即使在初始加载时，它也会等待 10 秒，相反，它应该立即调用，然后在 10 秒后再次调用。我怎样才能做到这一点？

const callApiAfterOneSec = async () => {
await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
.then(res => {
setLoading(false);
setPost(res.data);
})
.catch(err => {
setLoading(false);
console.log(err);
});
};
useEffect(() => {
const interval = setInterval(callApiAfterOneSec, 10000);
return () => {
clearInterval(interval);
};
}, [post]);

Answer 1

尝试添加另一个useEffect()，只触发一次：

useEffect(() => {
callApiAfterOneSec();
}, []);

Answer 2

你可以把它用作类组件

class App extends React.Component {
interval;
constructor() {
super()
this.state = {
data: {}
}
}
componentDidMount() {
this.loadData();
this.interval = setInterval(this.loadData, 5000);
}
componentWillUnmount() {
clearTimeout(this.interval);
}
async loadData() {
try {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
await res.json().then(res => {
this.setState({
data: res
})
})
} catch (e) {
console.log(e);
}
}
render() {
return (
<div>
<ul>
<li>UserId : {this.state.data.userId}</li>
<li>Title : {this.state.data.title}</li>
<li>Body : {this.state.data.body}</li>
</ul>
</div>
);
}
}
render(<App />, document.getElementById('root'));

正如@xadm提到的，您可以根据需要使用效果两次 简单的修复

useEffect(() => {
callApiAfterOneSec();
}, []);

Answer 3

这只是一个可能解决您问题的黑客。

const [rendered, setRendered] = useState(false);
useEffect(() => {
let interval = null;
if(rendered) interval =  setInterval(callApiAfterOneSec, 10000)
setRendered(true);
return () => {
clearInterval(interval)
}
}, [post, rendered])