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

Question

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

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;

Answer 1

您应该像下面这样控制台，setState() 是异步的，因此不会立即应用状态更改。如果要注销新状态，setState() 接受一个函数作为第二个参数，并在状态更新时执行该函数

  this.setState({ url: this.state.url + str }, () =>console.log(this.state.url));

在这两种情况下你都超过了 "land_success", true，一个应该是 false，我猜第二个应该是 false

     <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>

Answer 2

过滤器的状态随着每次点击而更新（即使是第一次点击）。我建议为 chrome/firefox 安装 React Developer 工具扩展之类的东西，以快速检查组件的运行情况。

我不知道这是否是故意的，但您的代码现在只是在每次点击时连接 url。因此，如果我单击 2016 年，然后单击 2017 年。您的 url 变为：https://api.spaceXdata.com/v3/launches?limit=100&launch_year=2016&launch_year=2017&

显然，returns 没有数据。

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

Applying multiple filter using reactjs but not able to set state at the time of button click

state

render

filter

updates

reactjs