如果不想用this.state.list 想要直接用list的时候,就需要解构
一进页面,render()会先执行两次,一次是初始化的时候,一次是加载成功的时候
<title>获取数据</title>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script type="text/babel">
const { Component } = React;
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
page: 1,
};
}
componentDidMount() {
// console.log("组件挂载成功之后的处理函数");
// 此处主要用来获取数据操作
this.loadMore();
}
loadMore() {
const { page, list } = this.state; // 解构赋值
fetch("http://localhost:3009/api/v1/books?page=" + page)
.then((res) => res.json())
.then((res) => {
// console.log(res);
this.setState({
list: [...list, ...res.books],
page: page + 1,
});
});
}
// 当组件的state或者props改变之后会触发执行
render() {
// 如果不想用this.state.list 想要直接用list的时候,就需要解构
const { list } = this.state;
console.count("执行了render方法");
return (
<div className="main">
<h1>我是一个App</h1>
<ul>
{list.map((book) => (
<li key={book.id}>{book.title}</li>
))}
</ul>
<button onClick={() => this.loadMore()}>加载更多</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>