使用useState, useEffect实现加载更多功能。
接口地址换成自己的接口地址
<body>
<div id="app"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script type="text/babel">
const { useState, useEffect } = React;
function App() {
const [list, setList] = useState([]);
const [page, setPage] = useState(1);
// 监听page改变,page改变,重新发起一个请求,调取数据
useEffect(() => {
//使用原生js自带的请求数据方式fetch
fetch(`http://api.cat-shop.penkuoer.com/api/v1/products?page=${page}`)
.then((res) => res.json())
.then((data) => {
setList([...list, ...data.products]);
});
}, [page]);
return (
<div className="main">
<ul>
{list.map((item) => (
<li key={item._id}>{item.name}</li>
))}
</ul>
<button onClick={() => setPage(page + 1)}>加载更多</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>