使用reactjs应用多个筛选器，但无法在单击按钮时设置状态

我无法在单击每个按钮时更新状态，但在第二次单击时状态正在更新。我有一个过滤器功能，当我点击任何按钮时运行，但当我点击按钮时它并没有更新状态。相反，当我再次单击时，它正在更新

import React, { Component } from "react";
    
class Filter extends Component {
  state = {
    data: [],
    year: "",
    land: "",
    launch: "",
    url: "https://api.spaceXdata.com/v3/launches?limit=100&",
    str: "",
  };
    
    
  filterfunction(type, value) {
    this.setState({ [type]: value });
        
    if (type == "launch_year") {
      let str = type + "=" + value + "&";
      this.setState({ url: this.state.url + str });
      console.log("yearrrrrrrrrrrrrrrrrrrr", this.state.url);
      fetch(this.state.url)
        .then((response) => response.json())
        .then((data) => this.setState({ data: data }));
    } else if (type == "launch_success") {
      let str = type + "=" + value + "&";
      this.setState({ url: this.state.url + str });
      console.log("launcccccccccccccccccccc", this.state.url);
      fetch(this.state.url)
        .then((response) => response.json())
        .then((data) => this.setState({ data: data }));
    } else if (type == "land_success") {
      let str = type + "=" + value + "&";
      this.setState({ url: this.state.url + str });
      console.log("landdddddddddddddddddddddddd", this.state.url);
      fetch(this.state.url)
        .then((response) => response.json())
        .then((data) => this.setState({ data: data }));
    }
  }
    
  render() {
   return (
     <React.Fragment>
       <div className="filter-section">
         <h4 className="filter-headin">Filters</h4>
         <div className="filter-year">
           <p>Launch Year</p>
           <div className="row filter-row">
             <div className="col filter-column">
               <button
                 onClick={() => this.filterfunction("launch_year", 2006)}
                 type="button"
                 name=""
                 id=""
                 className="btn btn-primary year-button"
               >
                 2006
               </button>
             </div>
             <div className="col filter-column">
               <button
                 onClick={() => this.filterfunction("launch_year", 2007)}
                 type="button"
                 name=""
                 id=""
                 className="btn btn-primary year-button"
               >
                2007
              </button>
             </div>
           </div>
           <div className="row filter-row">
             <div className="col filter-column">
             <button
               onClick={() => this.filterfunction("launch_year", 2008)}
                 type="button"
                 name=""
                 id=""
                 className="btn btn-primary year-button"
              >
                2008
              </button>
            </div>
            <div className="col filter-column">
              <button
                onClick={() => this.filterfunction("launch_year", 2009)}
                type="button"
                name=""
                id=""
                className="btn btn-primary year-button"
              >
                2009
              </button>
            </div>
          </div>
          <div className="row filter-row">
            <div className="col filter-column">
              <button
                onClick={() => this.filterfunction("launch_year", 2010)}
                type="button"
                name=""
                id=""
                className="btn btn-primary year-button"
              >
               2010
            </button>
          </div>
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_year", 2011)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              2011
            </button>
          </div>
        </div>
        <div className="row filter-row">
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_year", 2012)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              2012
            </button>
          </div>
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_year", 2013)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              2013
            </button>
          </div>
        </div>
        <div className="row filter-row">
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_year", 2014)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              2014
            </button>
          </div>
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_year", 2015)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              2015
          </button>
          </div>
        </div>
        <div className="row filter-row">
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_year", 2016)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              2016
            </button>
          </div>
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_year", 2017)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              2017
            </button>
          </div>
        </div>
        <div className="row filter-row">
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_year", 2018)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              2018
            </button>
          </div>
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_year", 2019)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              2019
            </button>
          </div>
        </div>
        <div className="row filter-row">
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_year", 2020)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              2020
            </button>
          </div>
        </div>
      </div>
      <div className="successful-launch">
        <p>Successful Launch</p>
        <div className="row filter-row">
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_success", true)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              True
            </button>
          </div>
          <div className="col filter-column">
            <button
              onClick={() => this.filterfunction("launch_success", false)}
              type="button"
              name=""
              id=""
              className="btn btn-primary year-button"
            >
              False
            </button>
          </div>
        </div>
       </div>
       <div className="successful-launch">
         <p>Successful Land</p>
           <div className="row filter-row">
             <div className="col filter-column">
               <button
                 onClick={() => this.filterfunction("land_success", true)}
                 type="button"
                 name=""
                 id=""
                 className="btn btn-primary year-button"
               >
                 True
               </button>
             </div>
             <div className="col filter-column">
               <button
                 onClick={() => this.filterfunction("land_success", true)}
                 type="button"
                 name=""
                 id=""
                 className="btn btn-primary year-button"
               >
                 False
               </button>
             </div>
           </div>
         </div>
       </div>
       </React.Fragment>
     );
   }
 }
    
 export default Filter;

import React，{Component}来自“React”；
类过滤器扩展组件{
状态={
数据：[]，
年份：“，
土地：“，
发射：“，
url:“https://api.spaceXdata.com/v3/launches?limit=100&",
str:“，
};
filterfunction（类型、值）{
this.setState（{[type]：value}）；
如果（类型==“启动年”）{
设str=type+“=”+value+“&”；
this.setState（{url:this.state.url+str}）；
log（“yearrrrrrrrrr”，this.state.url）；
获取（this.state.url）
.then（（response）=>response.json（））
.then（（data）=>this.setState（{data:data}））；
}else if（类型==“启动成功”）{
设str=type+“=”+value+“&”；
this.setState（{url:this.state.url+str}）；
log（“launcccccccc”，this.state.url）；
获取（this.state.url）
.then（（response）=>response.json（））
.then（（data）=>this.setState（{data:data}））；
}else if（类型=“着陆成功”）{
设str=type+“=”+value+“&”；
this.setState（{url:this.state.url+str}）；
log（“landdddddddddddddddddddddd”，this.state.url）；
获取（this.state.url）
.then（（response）=>response.json（））
.then（（data）=>this.setState（{data:data}））；
}
}
render（）{
返回(
过滤器
发射年份

this.filterfunction（“发布年份”，2006年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2006
this.filterfunction（“发布年份”，2007年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2007
this.filterfunction（“发布年份”，2008年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2008
this.filterfunction（“发布年份”，2009年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2009
this.filterfunction（“发布年份”，2010年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2010
this.filterfunction（“发布年份”，2011年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2011
this.filterfunction（“发布年份”，2012年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2012
this.filterfunction（“发布年份”，2013年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2013
此.filterfunction（“发布年份”，2014年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2014
this.filterfunction（“发布年份”，2015年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2015
此.filterfunction（“发布年份”，2016年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2016
此.filterfunction（“发布年份”，2017年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2017
此.filterfunction（“发布年份”，2018年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2018
此.filterfunction（“发布年份，2019年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2019
此.filterfunction（“发布年份，2020年）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
>
2020
成功发射

this.filterfunction（“启动成功”，true）}
type=“按钮”
name=“”
id=“”
className=“btn btn主要年份按钮”
  this.setState({ url: this.state.url + str }, () =>console.log(this.state.url));

     <div className="col filter-column">
        <button
          onClick={() => this.filterfunction("land_success", true)}
          type="button"
          name=""
          id=""
          className="btn btn-primary year-button"
        >
          True
        </button>
      </div>
      <div className="col filter-column">
        <button
          onClick={() => this.filterfunction("land_success", true)}
          type="button"
          name=""
          id=""
          className="btn btn-primary year-button"
        >
          False
        </button>
      </div>