Question

我是新手做出反应，并且在将一些过滤后的数据渲染到组件时遇到了问题。

我将数据导入到父<app/>容器的状态，如下所示：

getInitialState () {
    return {
        samples:allSamples,
        searchInputVal:""
    }   
},

以下是加载到样本初始状态的数据：

export default [
            {
            id:"1",
            sampleName:'Deep House Base',
            sampleFamily:'Deep House Pack',
            parentCategory:"bass",
            subCategory:"house bass",
            uploader:"Ben",
            soundSource:"../../samplesWav/bd_909dwsd.wav",
            tags:[
                "house","ghouse","tech-house","rad"
            ]
        },
            {
            id:"2",
            sampleName:'Deep House Base',
            sampleFamily:'G House Pack',
            parentCategory:"bass",
            subCategory:"house bass",
            uploader:"Ben",
            soundSource:"../../samplesWav/bd_chicago.wav",
            tags:[
                "house","ghouse","tech-house","rad"
            ]
        }
]

我创建了一个标题组件，它是<app/>的子组件，其中输入到服务器作为过滤器函数，如下所示：

<input placeholder="Search Samples Here..." onChange={this.props.updateSearch} value={this.props.searchInputVal} type="text"></input>

onChange它在其父级中执行updateSearch函数。这就是该函数的样子：

updateSearch(event){
    this.setState({
        searchInputVal:event.target.value.substr(0,20)
    })
},

目前，当我在输入中键入字母时，状态正在使用值进行更新，以便部件正常工作。这是我渲染我没有过滤的对象的部分。这是我试图过滤的组件：

class SamplesInnerLrg extends Component {  
    render() {
        let filteredSamples = this.props.loadAllInitSamples.filter(
            (sample) => {
                return sample.sampleFamily.indexOf(
                    this.props.searchInputVal
                )
            }
        )
        return <div className="samples-container-inner-styling">
        {
        console.log(filteredSamples),
        filteredSamples.map((sample) => {
        return (
                <div key={sample.id} className="sample-comp-lge">
                <div className="sample-comp-lge-head-wrap">
                    <div className="sample-comp-lge-audio" id={sample.id} ref={sample.id} onClick={this.playSampleAction.bind(undefined,sample,sample.id)}>
                        <audio preload="auto" className="audioTag">
                              <source src={sample.soundSource} type="audio/wav" />
                        </audio>
                    </div>
                    <div className="sample-comp-lge-header">
                        <span className="sample-comp-lge-Name"><h1>{sample.sampleName}</h1></span>
                        <span className="sample-comp-lge-id"><h2><a href="#">{sample.sampleFamily}</a></h2></span>
                        <div className="sample-comp-lge-owner-cont">
                            <div className="sample-comp-lge-owner-inner">
                                <a href="">{sample.uploader}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="sample-comp-lge-bottom-wrap">
                    <div className="sample-comp-lge-tags-cont">
                        <div className="sample-comp-lge-tag">
                            <ul className="sample-tags-list">
                                {
                                    sample.tags.map((tag) => {
                                        return ( 

                                            <li key={tag}><a href="#">#{tag}</a></li>
                                        )
                                    })

                                }
                            </ul>
                        </div>
                    </div>
                </div>

                </div>
            )
        })
   }
   </div>
    }
}

这个组件的渲染有两个问题。首先，当我加载页面时，没有对象呈现给DOM，但是当我开始在输入框中输入时，它们突然出现。其次，无论我输入什么都无关紧要，无论如何都会出现（我有2个以上但是为了StackOverflow我只包括2个）。我哪里出错了？

Answer 1

这一行：

Error in as.list.default(X) : 
  no method for coercing this S4 class to a vector

......有问题。如果找不到任何内容，let filteredSamples = this.props.loadAllInitSamples.filter( (sample) => { return sample.sampleFamily.indexOf( this.props.searchInputVal ) } )会返回索引或indexOf。 -1期望函数返回一个布尔值。您希望在索引结果中添加.filter(...)以将其转换为布尔值（假设您希望＆＃34;存在且＃34;为>= 0）：

true

React过滤器不过滤对象

1 个答案: