import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({});
useEffect(() => {
const interval = setInterval(() => {
axios.get('https://api.example.com/data')
.then(response => {
setData(response.data);
})
}, 1000);
return () => clearInterval(interval);
}, []);
return (
{data.value}
);
}
export default App;
在这个例子中,我们使用了useEffect函数,它会在组件每次渲染时执行。我们设置了定时器,以每隔一秒钟向API发送一个请求,并在收到响应后更新组件的状态。
import React from 'react';
import axios from 'axios';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: {},
}
}
componentDidMount() {
this.interval = setInterval(() => {
axios.get('https://api.example.com/data')
.then(response => {
this.setState({ data: response.data });
})
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
{this.state.data.value}
);
}
}
export default App;
在这个例子中,我们使用React Class Components来定义组件。我们在组件挂载时设置了定时器,并在收到API响应后更新了组件状态。记得在组件卸载时清除定时器。