javascript - 在反应 UI 中提取满足范围标准的排序数组值

Question

• 我使用来自下拉框、复选框和文本框的用户输入值过滤了数组值
• 我正在尝试对过滤后的数组值进行排序
• 接着渲染名称属性以及属于一定范围的运动游戏和等级
• 我使用了 array.filter() 方法和条件渲染来执行
• 我对过滤运动游戏成绩的条件操作以及渲染过滤值的操作感到震惊
• 你们能用你们的建议帮我解决这个问题吗
• 完整代码可在 stackblitz 链接中找到：https ://stackblitz.com/edit/react-geum6v?file=index.js
• 提供以下代码片段：

index.js（html部分）

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

Students received a grade within a range: 
          min grade:<select value={min_grade} onChange={this.handleChange_mingrade}>
            <option value="select">Select</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="c">C</option>
          </select>
          max_grade:<select value={max_grade} onChange={this.handleChange_maxgrade}>
            <option value="select">Select</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="c">C</option>
          </select><br/><br />

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

Players with range of Sport games grades : {result.length && result[0].Sports_games.map(g => { var visibility = (check && g[Object.keys(g)[0]]) ? 'block' : 'none'; var sorted = {sorted:(visibility && g[Object.keys(g)[0]])}; console.log(sorted);return <div style={{display: visibility}}>{Object.keys(g)[0]} {g[Object.keys(g)[0]]}</div> } )} <br/><br/>

（JS部分）

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

const newArray = students.filter((el) => { return ((el.zip === zip1) && (parseInt(el.Age) <= parseInt(age1[Object.keys(age1)[0]])) && (el.sports_state != (state1)) && check ) });
const newArray1 = newArray[0].Sports_games.map((el1) => { return Object.keys(el1) });
const sorted = newArray1[Object.keys(newArray1)].sort();
console.log(age1);
console.log(zip1);
console.log("here--", this.state.zip1, this.state.age1);
console.log(newArray);
//console.log(newArray1);
//console.log(sorted);
console.log(newArray.Subjects);
console.log(count);
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 */
      )
  )
}

标签： javascripthtmlreactjs