Question

我使用下拉框，复选框和文本框中的用户输入值过滤了数组值
我正在尝试对过滤后的数组值进行排序
接着呈现名称属性以及体育游戏和等级，这些等级属于特定范围
我已经使用array.filter（）方法和条件渲染来执行
我对过滤sport_games成绩以及呈现过滤后的值的条件操作感到震惊要显示的值是带有体育游戏的名称和符合范围标准的成绩通过
你们能帮我解决您的建议吗
整个代码可在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 */
      )
  )
}

在React UI中提取满足范围条件的排序数组值

0 个答案: