Javascript 单击返回到以前的状态或Reactjs中的触发器函数

我正在尝试进行过滤器导航，并希望返回到以前的状态或触发器函数以从另一个API获取数据

单击此状态，我应该能够清除过滤器以从另一个API返回响应

要完全理解它，请看下面我创建的示例应用程序

Stackblitz:

下面是组件

    class Playground extends Component {
      constructor(props) {
    super(props);
    this.state = {
      selectedLanguage: 'All', // default state
      repos: null
    };
    this.updateLanguage = this.updateLanguage.bind(this);
    this.updateLanguagenew = this.updateLanguagenew.bind(this);
  }

  componentDidMount() {
    this.updateLanguage(this.state.selectedLanguage);
  }

  updateLanguage(lang) {
    this.setState({
      selectedLanguage: lang,
      repos: null
    });

    fetchPopularRepos(lang).then(
      function (repos) {
        this.setState(function () {
          return { repos: repos };
        });
      }.bind(this)
    );
  }

  updateLanguagenew(lang) {
    if (lang === 'All') {
      this.updateLanguage(lang);
      return;
    }
    this.setState({
      selectedLanguage: lang,
      repos: null
    });
    fetchPopularReposUpdated(lang).then(
      function (repos) {
        this.setState(function () {
          return { repos: repos };
        });
      }.bind(this)
    );
  }

  render() {
    return (
      <div>
        <div>
        This is the current state : <strong style={{padding: '10px',color:'red'}}>{this.state.selectedLanguage}</strong>
        </div>

        <div style={{padding: '10px'}}>
        On click of above state I should be able to trigger this function <strong>(updateLanguage)</strong> again to clear the filter and load data from this API 
        </div>
        <p>Click the below options</p>
        <SelectLanguage
          selectedLanguage={this.state.selectedLanguage}
          onSelect={this.updateLanguagenew}
        />
        {//don't call it until repos are loaded
        !this.state.repos ? (
          <div>Loading</div>
        ) : (
          <RepoGrid repos={this.state.repos} />
        )}
      </div>
    );
  }
    }

类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
selectedLanguage:'全部'，//默认状态
回购协议：无效
};
this.updateLanguage=this.updateLanguage.bind（this）；
this.updateLanguagenew=this.updateLanguagenew.bind（this）；
}
componentDidMount（）{
this.updateLanguage（this.state.selectedLanguage）；
}
更新语言（lang）{
这是我的国家({
选择语言：lang，
回购协议：无效
});
fetchPopularRepos（lang）。然后(
功能（回购）{
this.setState（函数（）{
返回{repos:repos}；
});
}.绑定（此）
);
}
updateLanguagenew（朗）{
如果（lang=='All'）{
这个。更新语言（lang）；
返回；
}
这是我的国家({
选择语言：lang，
回购协议：无效
});
fetchPopularReposUpdated（lang）。然后(
功能（回购）{
this.setState（函数（）{
返回{repos:repos}；
});
}.绑定（此）
);
}
render（）{
返回(
这是当前状态：{This.state.selectedLanguage}
单击上述状态，我应该能够再次触发此函数（updateLanguage），以清除过滤器并从此API加载数据
单击下面的选项

{//在加载repo之前不要调用它
！这个。州。回购(
加载
) : (
)}
);
}
}

为过滤器选项选择语言组件映射：

class SelectLanguage extends Component {
  constructor(props) {
      super(props);
      this.state = {
            searchInput: '',
      };      
  }

  filterItems = () => {
    let result = [];
    const { searchInput } = this.state;
    const languages = [ {
    "options": [
      {
        "catgeory_name": "Sigma",
        "category_id": "755"
      },
      {
      "catgeory_name": "Footner",
      "category_id": "611"
      }
    ]
  }
  ];
  const filterbrandsnew = languages;
  let value
  if (filterbrandsnew) {
    value = filterbrandsnew[0].options.map(({catgeory_name})=>catgeory_name);
    console.log (value);
  }
  const brand = value;
    if (searchInput) {
        result = this.elementContainsSearchString(searchInput, brand);
    } else {
        result = brand || [];
    }
    return result;
  }
  render() {
        const filteredList = this.filterItems();
        return (
            <div className="filter-options">
                <ul className="languages">
                    {filteredList.map(lang => (
                        <li
                            className={lang === this.props.selectedLanguage ? 'selected' : ''}
                            onClick={this.props.onSelect.bind(null, lang)}
                            key={lang}
                        >
                            {lang}
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}

class SelectLanguage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
搜索输入：“”，
};      
}
filterItems=（）=>{
让结果=[]；
const{searchInput}=this.state；
常量语言=[{
“选择”：[
{
“catgeory_名称”：“Sigma”，
“类别识别号”：“755”
},
{
“catgeory_name”：“Footner”，
“类别识别号”：“611”
}
]
}
];
const filterbrandsnew=语言；
让值
如果（filterbrandsnew）{
value=filterbrandsnew[0]。options.map（{catgeory_name}）=>catgeory_name）；
console.log（值）；
}
const品牌=价值；
如果（搜索输入）{
结果=this.element包含搜索字符串（搜索输入，品牌）；
}否则{
结果=品牌| |[]；
}
返回结果；
}
render（）{
const filteredList=this.filterietems（）；
返回(

{filteredList.map（lang=>(

{lang}

))}

);
}
}

---

注意：这具有当前状态

{This.state.selectedLanguage}

，单击此按钮我应该能够触发此函数<代码>更新语言

设置状态的方式不正确 改变

到

也改变

   fetchPopularReposUpdated(lang).then(
        function (repos) {
            this.setState(function () {
               return { repos: repos };
            });
        }.bind(this)
     );

到

---

谢谢，我会换的。有关此操作的任何信息，请单击选项并在所选状态上重置按钮以获取状态

{this.state.selectedLanguage}

？

     fetchPopularRepos(lang).then(
         function (repos) {
              this.setState({
                  repos: repos
              });
         }.bind(this)
      );

   fetchPopularReposUpdated(lang).then(
        function (repos) {
            this.setState(function () {
               return { repos: repos };
            });
        }.bind(this)
     );

  fetchPopularReposUpdated(lang).then(
        function (repos) {
            this.setState({
               repos: repos
            });
        }.bind(this)
     );