React - 从对象内部的数组中填充下拉列表并过滤数据

Question

每个人。我有一个 React 应用程序，它应该按照不同的标准过滤天文馆节目。其中一个条件应该有多个值：

var shows = [
    { id: 1, name: 'Black Holes', showType: 'Full Dome', age: 'All Ages', grade: ['Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_blackholes.png'},
    { id: 2, name: 'Astronaut', showType: 'Full Dome', age: 'All Ages', grade: ['Early Elementary,',' Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_astronaut.png'},
    { id: 3, name: 'Laser Holidays', showType: 'Laser', age: '18+', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_laserholidays.png'},
    { id: 4, name: 'The Gruffalo', showType: 'Flat Screen', age: 'All Ages', grade: ['Pre-K', 'Kinder'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_gruffalo.png'},
    { id: 5, name: 'Laser iPOP', showType: 'Laser', age: 'All Ages', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_ipop.png'}
];

“shows”对象的“grade”属性可以有多个值，我决定将它们放在一个数组中。

我需要两件事： 1 - 我需要用所有可能的值填充“等级”下拉列表，没有重复值； 2 - 我需要能够根据用户在该下拉列表中选择的内容过滤显示，类似于“显示类型”和“年龄”下拉列表。关于如何做到这一点的任何想法？谢谢。

var shows = [
    { id: 1, name: 'Black Holes', showType: 'Full Dome', age: 'All Ages', grade: ['Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_blackholes.png'},
    { id: 2, name: 'Astronaut', showType: 'Full Dome', age: 'All Ages', grade: ['Early Elementary,',' Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_astronaut.png'},
    { id: 3, name: 'Laser Holidays', showType: 'Laser', age: '18+', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_laserholidays.png'},
    { id: 4, name: 'The Gruffalo', showType: 'Flat Screen', age: 'All Ages', grade: ['Pre-K', 'Kinder'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_gruffalo.png'},
    { id: 5, name: 'Laser iPOP', showType: 'Laser', age: 'All Ages', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_ipop.png'}
];

// FilterForm React Class
var FilterForm = React.createClass({
    getInitialState: function() {
        return {
            data: this.props.data,
            showType: '',
            age: '',
            grade: '',
        }
    },
    filterItems: function(val, type){
        switch (type) {
            case 'showType':
                this.setState({showType: val});
                break;
            case 'age':
                this.setState({age: val});
                break;
            case 'grade':
                this.setState({grade: val});
                break;
            default:
                break;
        }
    },
    render: function() {
        var filteredItems = this.props.data;
        var state = this.state;
        ["showType", "age", "grade"].forEach(function(filterBy) {
            var filterValue = state[filterBy];
            if (filterValue){
                filteredItems = filteredItems.filter(function(item){
                    return item[filterBy] === filterValue;
                });
            }
        });
        var showTypeArray = this.props.data.map(function(item) {return item.showType});
        var ageArray = this.props.data.map(function(item) {return item.age});
        // This array gets once instance of all grade options since one show can be good for several grades
        var gradeArray = this.props.data.map(function(item){
            return item.grade;
        });
        showTypeArray.unshift("");
        ageArray.unshift("");
        gradeArray.unshift("");
        return(
                <div className="container">
                    <FilterOptions
                        data={this.state.data}
                        showTypeOptions={showTypeArray}
                        ageOptions={ageArray}
                        gradeOptions={gradeArray}
                        changeOption={this.filterItems} />
                    <div className="filter-form">
                        <FilterItems data={filteredItems} />
                    </div>
                </div>
        )
    }
});

// FilterOptions React Class
var FilterOptions = React.createClass({
    changeOption: function(type, e) {
        var val = e.target.value;
        this.props.changeOption(val, type);
    },
    render: function(){
        return (
                <div className="filter-options">
                    <div className="filter-option">
                        <label>Show Type</label>
                        <select id="showType" value={this.props.showType} onChange={this.changeOption.bind(this, 'showType')}>
                            {this.props.showTypeOptions.map(function(option) {
                                return ( <option key={option} value={option}>{option}</option>)
                            })}
                        </select>
                        <label>Age</label>
                        <select id="age" value={this.props.age} onChange={this.changeOption.bind(this, 'age')}>
                            {this.props.ageOptions.map(function(option) {
                                return ( <option key={option} value={option}>{option}</option>)
                            })}
                        </select>
                        <label>Grade</label>
                        <select id="grade" value={this.props.grade} onChange={this.changeOption.bind(this, 'grade')}>
                            {this.props.gradeOptions.map(function(option) {
                                return ( <option key={option} value={option}>{option}</option>)
                            })}
                        </select>
                    </div>
                </div>
        );
    }
});

// FilterItems React Class
var FilterItems = React.createClass({
    render: function(){
        return(
                <div className="filter-items">
                    <br />
                    {this.props.data.map(function(item){
                        return(
                                <div className="filter-item">{item.id} - {item.name} - {item.showType} - {item.age}</div>
                        );
                    })}
                </div>
        )
    }
});



ReactDOM.render(
        <FilterForm data={shows}/>,
        document.getElementById('show-catalog')
);

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="show-catalog"></div>

Answer 1

1) 您可以使用 Set 从数组中获取一组唯一值。例如，

var gradeArray = this.props.data.map(function(item){
    return item.grade;
});
var uniqueGrades = Array.from(new Set(gradeArray));

2) 您当前的代码有什么问题？