react----掉接口取数据

最新推荐文章于 2023-05-30 15:28:00 发布

咩有猫腻.

最新推荐文章于 2023-05-30 15:28:00 发布

阅读量465

点赞数

分类专栏：三-框架类 reactjs

本文链接：https://blog.csdn.net/DcTbnk/article/details/107672081

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

reactjs

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述
如果不想用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>