Question

我正在React建造一个公寓租赁应用程序，具有非常有限的Javascript和程序知识（使用这个应用程序来学习我去）。我偶然发现了一个试图建立过滤功能的障碍。

以下是FilterContainer.js容器组件的代码

const FilterContainer = React.createClass({
render () {
    return (
        <section id="filterContainer" className="container">
            <Filter
                name={'Kvart'}
                filterList={['Šubićevac', 'Meterize', 'Baldekin', 'Vidici', 'Rokići', 'Grad']} />
            <Filter
                name={'Cijena'}
                filterList={['< 600kn', '600kn - 700kn', '700kn - 800kn', '800kn - 900kn', '> 900kn']} />
            <Filter
                name={'Broj osoba'}
                filterList={['1', '2', '3', '4', '5', '6']} />
            <Filter
                name={'Kvadratura'}
                filterList={['< 40m', '40m - 50m', '50m - 60m', '60m - 70m', '70m - 80m', '> 80m']} />
        </section>
    )
}});

这是Filter.js组件

var Filter = React.createClass({
getDefaultProps() {
    return {
        filterList: [],
        name: ''
    };
},
render() {
    var handleClick = function(i, props) {
        console.log('You clicked: ' + props.filterList[i].listValue[i]);
    }
    return (
        <div className="filterCloud quarter-section">
            <h3>{this.props.name}</h3>
            <ul>
                {this.props.filterList.map(function(listValue, i, props) {
                    return <li onClick={handleClick.bind(this, i, props)} key={i}>{listValue}</li>;
                }, this)} {/* this at the end to fix the scope issue from global to local */}
            </ul>
        </div>
    )
}});

这就是过滤器在网站atm上的显示方式

我得到的错误是＆＃34; Filter.js：13 Uncaught TypeError：无法读取属性＆＃39; 0＆＃39;未定义＆＃34;每当我点击其中一个过滤器项目时，我希望能够将过滤器项目的名称保存为我将用于过滤公寓的数据。

所以简单的问题是未定义的错误。我遇到的更复杂的问题是，我不知道如何在我的应用程序中构建过滤器功能，所以如果你们中的任何人能指出我正确的方向，它将帮助我很多。

Answer 1

map function in javascript的第三个参数是正在映射的完整数组。

在这种情况下，它是filterList，而不是this.props。

因此，在您单击处理程序时，您不需要遍历props：

var handleClick = function(i, props) {
    console.log('You clicked: ' + props[i].listValue[i]);
}

您是否更容易看到是否进行了重命名：

render() {
    var handleClick = function(i, filterList) {
        console.log('You clicked: ' + filterList[i].listValue[i]);
    }
    return (
        <div className="filterCloud quarter-section">
            <h3>{this.props.name}</h3>
            <ul>
                {this.props.filterList.map(function(listValue, i, filterList) {
                    return <li onClick={handleClick.bind(this, i, filterList)} key={i}>{listValue}</li>;
                }, this)} {/* this at the end to fix the scope issue from global to local */}
            </ul>
        </div>
    )
}});

过滤反应组件中的功能

1 个答案: