javascript - 在过滤器 if 语句中拨号时遇到问题 - 多个下拉菜单

Question

我想要的功能:下拉菜单 1 = 位置下拉菜单 2 = 技能

当用户从下拉列表中选择一个位置并从另一个下拉列表中选择一项技能时，他们将看到结果(当前有效)

但我遇到麻烦的部分是“所有地点”和“所有技能”[注意] 我无法更改来自 API 的数据

当前页面加载时没有人(如果默认是显示所有技能的所有位置，那就太好了)，并且下拉菜单设置为“所有位置”和“所有技能，但我不知道如何使这些状态意味着任何事情，

或者怎么说“所有地点”意味着您正在关注所有人，或者技能相同

任何帮助都会很棒。这是我目前所在的位置我的猜测是，这可以通过 if else 语句或其中几个语句来实现。我不知道我开始感到困惑

 constructor(props) {
    super(props);
    this.state = {
      developers: [],
      filterCountry: "All locations",
      filterSkills: "All skills"
    };
  }

  componentDidMount() {
    fetch('API')
    .then(features =>  features.json())
    .then(developers => {
      this.setState({  developers })   
    })
  }

  filterCountry(e){
    this.setState({filterCountry: e })
  }

  filterSkills(e){
    this.setState({filterSkills: e })
  }

  render() {

    let developers = this.state.developers.features

    if (!developers ){
      return null
    }

   if  (this.state.filterCountry && this.state.filterSkills) {
      developers = developers.filter( developer =>
      developer.properties.continent
        .includes(this.state.filterCountry )
        )

     developers = developers.filter( developer =>
      developer.properties.skills 
        .includes(this.state.filterSkills )
        )

    }

任何帮助将不胜感激

console.log(developers)
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
geometry
:
{coordinates: Array(2), type: "Point"}
id
:
"22bcd3917f78652cc62ee6908f057ceb"
properties
:
company_name
:
"redacted"
continent
:
"North America"
description
:
""
email
:
"redacted"
github
:
"redacted"
linkedin
:
""
location
:
"Sunnyvale, CA USA"

name
:
"redacted"
skills
:
""
skills_full
:
""
twitter
:
""
website
:
""
__proto__
:
Object
type
:
"Feature"
__proto__
:
Object

Answer 1

如果您只想在状态为filterCountry =“所有位置” 和filterSkills =“所有技能”时阻止过滤

您可以在过滤器中执行类似的操作:

developers = developers.filter( developer => { 
    return this.state.filterCountry === 'All locations' || developer.properties.continent.includes(this.state.filterCountry)
});