import React, { Component } from "react";
export default class App extends Component {
// 变动数据 同时渲染DOM 存储在state
// page当前页 默认第一页 接口没有返回页数 本地维护一个
state = { data: null,page:1};
// 组件挂在时触发
componentDidMount() {
// 发送网络请求
this.getData();
}
getData(page=1) {
const url = "https://api.apiopen.top/getWangYiNews?page="+page;
fetch(url)
.then((res) => res.json())
.then((res) => {
console.log(res);
// 请求后,设置存储当前页码到本地
this.setState({ data: res.result,page:page });
// 打印看一下
// console.log(this.state.data);
});
}
show = () =>
this.state.data.map((item, index) => (
<div key={index}>
<img src={item.image} />
React(6)练习:{新闻接口 列表展示 翻页按钮实现}
最新推荐文章于 2023-03-26 17:46:18 发布