Javascript 第一次状态不会改变

当我单击“下一步”按钮时，state.page将第二次更新。如果我向前滚动几次，想要显示新的存储库，它也只会在第二次按下时输出。帮我修一下。CodeSandBox上的项目：

Layout.js

import React from "react";
import axios from "axios";
import ReposList from "./ReposList";

export default class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      page: 1,
      pages: 100,
      per_page: 10
    };
  }

  searchNew() {
    this.setState(() => {
      return { page: 1 };
    });

    this.search();
  }

  search() {
    let text = document.getElementById("search-text").value;

    if (text !== "") {
      let sort = document.getElementById("sort-items").value;
      let sortValue = sort.split("-")[1];
      let pagination =
        "&page=" + this.state.page + "&per_page=" + this.state.per_page;
      let url =
        "https://api.github.com/search/repositories?q=" + text + pagination;

      if (sort === "best-matches") url += "&order=desc";

      if (sort === "most-stars") url += "&sort=" + sortValue + "&order=desc";

      if (sort === "fewest-stars") url += "&sort=" + sortValue + "&order=asc";

      if (sort === "most-followers")
        url += "&sort=" + sortValue + "&order=desc";

      if (sort === "fewest-followers")
        url += "&sort=" + sortValue + "&order=asc";

      if (sort === "most-forks") url += "&sort=" + sortValue + "&order=desc";

      if (sort === "fewest-forks") url += "&sort=" + sortValue + "&order=asc";
      console.log(this.state.page);
      axios(url)
        .then(response => {
          if (response.data.items.length !== 0) {
            this.setState(() => {
              return {
                data: response.data.items
              };
            });
          } else alert("Репозиториев не найдено.");
        })
        .catch(error => {
          alert("Не удалось обработать инструкции '" + text + "'.");
        });
    }
  }

  nextPage() {
    if (this.state.page !== this.state.pages)
      this.setState(state => {
        return { page: state.page + 1 };
      });
    else
      this.setState(() => {
        return { page: 1 };
      });

    this.search();
  }

  changePerPage() {
    let per_page = document.getElementById("per_page").value;
    let pages = Math.floor(1000 / per_page);
    console.log(pages);
    this.setState(() => {
      return { per_page: per_page, pages: pages };
    });
  }

  changeCurrentPage(page) {
    this.setState(() => {
      return { page: page };
    });
  }

  render() {
    return (
      <div>
        <h3>Repository search</h3>
        <div id="search">
          <select id="sort-items" onChange={() => this.changeCurrentPage(1)}>
            <option value="best-match">Best match</option>
            <option value="most-stars">Most stars</option>
            <option value="fewest-stars">Fewest stars</option>
            <option value="most-forks">Most forks</option>
            <option value="fewest-forks">Fewest forks</option>
            <option value="most-followers">Most followers</option>
            <option value="fewest-followers">Fewest followers</option>
          </select>
          <input type="text" id="search-text" />
          <button onClick={() => this.searchNew()}>Search</button>
        </div>
        <div id="settings">
          <p>output amount</p>
          <input
            type="number"
            min="1"
            defaultValue="10"
            max="100"
            id="per_page"
            onChange={() => this.changePerPage()}
          />
        </div>
        <ReposList data={this.state.data} />
        <div id="pagination">
          {this.state.page}
          <button onClick={() => this.nextPage()}>Next</button>
        </div>
      </div>
    );
  }
}

从“React”导入React；
从“axios”导入axios；
从“/ReposList”导入ReposList；
导出默认类布局扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
页码：1，
页数：100，
每页：10
};
}
searchNew（）{
此.setState（（）=>{
返回{page:1}；
});
这是search（）；
}
搜索（）{
让text=document.getElementById（“搜索文本”）.value；
如果（文本！==“”）{
让sort=document.getElementById（“排序项”）.value；
让sortValue=sort.split（“-”[1]；
让分页=
“&page=“+this.state.page+”&per_page=“+this.state.per_page；
让url=
"https://api.github.com/search/repositories?q=“+文本+分页；
如果（排序==“最佳匹配”）url+=“&order=desc”；
如果（排序==“大多数星星”）url+=“&sort=“+sortValue+”&order=desc”；
如果（排序==“最少星星”）url+=“&sort=“+sortValue+”&order=asc”；
如果（排序==“大多数追随者”）
url+=“&sort=“+sortValue+”&order=desc”；
if（排序==“最少的跟随者”）
url+=“&sort=“+sortValue+”&order=asc”；
如果（排序==“大多数分叉”）url+=”&sort=“+sortValue+”&order=desc”；
如果（排序==“最少分叉”）url+=“&sort=“+sortValue+”&order=asc”；
console.log（this.state.page）；
axios（url）
。然后（响应=>{
if（response.data.items.length！==0）{
此.setState（（）=>{
返回{
数据：response.data.items
};
});
}其他警报（“зззззззззззззззз107；
})
.catch（错误=>{
警报（“ааааааааааааааааааа；
});
}
}
下一页（）{
if（this.state.page！==this.state.page）
this.setState（state=>{
返回{page:state.page+1}；
});
其他的
此.setState（（）=>{
返回{page:1}；
});
这是search（）；
}
changePerPage（）{
let per_page=document.getElementById（“per_page”）.value；
页数=数学楼层（1000页/每页）；
控制台日志（页）；
此.setState（（）=>{
返回{每页：每页，页：页}；
});
}
更改当前页面（第页）{
此.setState（（）=>{
返回{page:page}；
});
}
render（）{
返回(
存储库搜索
此.changeCurrentPage（1）}>
最佳匹配
大多数明星
最少的星星
大多数叉子
最少叉子
大多数追随者
最少的追随者
this.searchNew（）}>Search
产量

this.changePerPage（）}
/>
{this.state.page}
this.nextPage（）}>Next
);
}
}

RepoList.js

import React from "react";
import Repo from "./Repo";

export default class ReposList extends React.Component {
  render() {
    return (
      <div id="repos">
        {this.props.data.map((repo, index) => {
          return (
            <Repo
              key={index}
              avatar={repo.owner.avatar_url}
              login={repo.owner.login}
              url={repo.url}
              name={repo.name}
            />
          );
        })}
      </div>
    );
  }
}

从“React”导入React；
从“/Repo”导入回购；
导出默认类ReposList扩展React.Component{
render（）{
返回(
{this.props.data.map（（repo，index）=>{
返回(
);
})}
);
}
}

Repo.js

import React from "react";

export default function Repo(props) {
  return (
    <div className="repo">
      <img src={props.avatar} alt="avatar" />
      <p className="login">{props.login}</p>
      <a className="url" href={props.url}>
        {props.name}
      </a>
    </div>
  );
}

从“React”导入React；
导出默认功能回购（道具）{
返回(
{props.login}
);
}

实际上，您的状态会在第一次单击时更新，但会在稍后更新

setState

不是一个同步操作，它现在就改变了

这个状态，但只要有时间重新渲染它就会这样做

因此，当您直接在
this.setState
之后调用
this.search（）
时，
this.state
只是尚未更新，您将继续使用旧值

作为第二个参数，为了确保只有在状态保持后才调用
this.search
，您可以这样做

searchNew（）{
此.setState（（）=>{
返回{page:1}；
},
（）=>this.search（）
);
}