Question

我有一个api调用，以json格式返回数据。我想为下拉列表检索一个不同的校园。例如，我的json数据格式如下：

courses=[{campusname; A, coursename: X, id: 1},
          {campusname: A, coursename: Y, id: 2},
          {campusname: B, coursename: Z, id: 3}]

但是我下面的代码在这里没有返回任何选择。我不确定Set()语法是否正确。

App.js：

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import CampusName from './CampusName';
class App extends Component {
constructor() {
super();
this.state ={
  courses:[]
}
}


componentDidMount(){

  axios.get('https://mydomain/myAPIURL')
       .then(response=>{
       this.setState({courses:response.data});
      });
  }
 _getUniqueCampusName(){
const courses=this.state.courses;
const campusSelection=[...new Set(courses)];
return campusSelection.map(campus=>(<CampusName name={campus.campusname}/>));

}
render() {
const campusName=this._getUniqueCampusName;
return (
  <div className="App">
    <div className="filter">
       <select>
         <option>Select a Campus</option>
        {campusName}

       </select>
    </div>

  </div>
 );
 }
}

export default App;

CampusName.js

import React from 'react';
const campusName=props=>{
return(
   <option value={props.name}>{props.name}</option>
);
}
export default campusName;

Answer 1

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      courses: [
        { campusname: "A", coursename: "X", id: 1 },
        { campusname: "A", coursename: "Y", id: 2 },
        { campusname: "B", coursename: "Z", id: 3 }
      ]
    };
    this._getUniqueCampusName = this._getUniqueCampusName.bind(this);
  }

  _getUniqueCampusName() {
    const courses = this.state.courses;
    const campusSelection = [...new Set(courses.map(item => item.campusname))];
    //console.log(campusSelection);
    return campusSelection.map((campus, index) => (
      <option key={index}>{campus}</option>
    ));
  }

  render() {
    const campusName = this._getUniqueCampusName();
    return (
      <div className="App">
        <div className="filter">
          <select>
            <option>Select a Campus</option>
            {campusName}
          </select>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

https://codesandbox.io/s/r4z9z7zjmo

这是您的问题的有效示例。当您在javascript中使用 Set 函数时似乎出现了错误

Json数据中的不同值

1 个答案: