过滤数组值并在React UI中呈现

时间:2019-03-15 12:46:48

标签: javascript html reactjs

  • 我是新来的应聘者
  • 我正在尝试从下拉框,复选框和文本框中获取用户输入值
  • 随后通过对象数组(JSON)值进行验证,并在UI中呈现过滤后的数组值
  • 我已经使用array.filter()方法和条件渲染来执行
  • 此外,我对过滤以及渲染过滤后的值感到震惊
  • 要在用户界面中呈现的值是球员姓名和运动成绩
  • 你们能帮我解决您的建议吗
  • 整个代码可在stackblitz链接中找到:https://stackblitz.com/edit/react-geum6v?file=index.js
  • 提供以下代码段:

index.js

Players Belonging to same zip code:
     <input type="text" name="zip_code" defaultValue={zip1} onChange={this.handleChange_zip}></input> <br />

      Number of male over certain age: <input type="number" name="age_number" defaultValue= {age1} onChange={this.handleChange_age}></input> <br />

      Students not Belonging from a given state: 
      <select value={state1} onChange={this.handleChange_state}>
        <option value="select">Select</option>
        <option value="CA">CA</option>
        <option value="TX">TX</option>
      </select><br/>

      List of Subjects received grades: <input type="checkbox" name="subjects" value={check} onChange={this.handleChange_sub}></input><br/>

      <button onClick={this.sportsZipSearch.bind(this)}>Submit</button><br />
      {zipValue && <Zip result={result} />}


sportsZipSearch = () => {
    const { zip1, age1, count } = this.state;

    const newArray = students.filter((el) => { return ((el.zip === zip1) && (el.Age <= age1) && (el.sports_state === state1) && check) });
    this.setState({ result: newArray, zipValue: true })
  }

zip.js

const Zip = (props) => {
  return(
    props.result.map(
      results => 
      <h1 key={results.player_first_name}>{results.player_first_name}</h1>
      /* This is not a perfect key, but given the values at hand */
      )
  )
}

1 个答案:

答案 0 :(得分:1)

在比较诸如(el.Age <= age1)之类的字符串时要小心。在进行比较之前,应将其解析为int。更改为:

parseInt(el.Age) <= parseInt(age1))

此比较将使您过滤返回[空]。例如:

("15" <= "100")
 -> return false