Question

我正在尝试根据表中的搜索操作表数据。所以，我所拥有的就是这种类型的数据：

this.props.datalist = {
    "content": [{
        "id": "5b7d4a566c5fd00507501051",
        "companyId": null,
        "title": "Senior/ Lead UI Developer",
        "jobDescription": null,
        "technology": "java"
    },{
        "id": "5b7d4a566c5fd005075011",
        "companyId": null,
        "title": "ead UI Developer",
        "jobDescription": null,
        "technology": "angular"
    }]
}

在这种情况下，我的数据来自我的`redux状态。因此，我通过将其作为道具以表格形式向用户展示。

我有一个搜索字段：

<input type="text"
       id="searchJob"
       className="form-control-sm border-0 flex-grow-1"
       value={this.state.search}
       placeholder="Company Name / Technology / Job title"
       onChange={this.onInputChnage} 
/>
    <i className="fa fa-search search-job"></i>

 onInputChnage = (e) => {
    this.setState({
      search: e.target.value
    }) 
  }


<div className="col-12 pr-0 pl-0">
            <UserJobsTabel jobList={filteredList} />
          </div>
        </div>

在这里，我使用过滤器获得了此数组中的过滤数据

 [{
        "id": "5b7d4a566c5fd00507501051",
        "companyId": null,
        "title": "Senior/ Lead UI Developer",
        "jobDescription": null,
        "technology": "java"
    },{
        "id": "5b7d4a566c5fd005075011",
        "companyId": null,
        "title": "ead UI Developer",
        "jobDescription": null,
        "technology": "angular"
    }]

现在，在设置状态时，

我就是这样。

this.setState({ search: data })

如果我想像这样使用"content": [{}]这样的键来设置状态，那我该怎么做呢？

因为我的使用方式就像

{this.props.dataList && this.props.dataList.content && this.props.dataList.content.length > 0 && this.props.dataList.content.sort((a, b) => b.createdAt - a.createdAt).map((item, key) => {

我想做的是表数据有两个键。一个是title和Technolgoy，现在进行搜索，然后它应该签入该对象并返回匹配的对象，并将其显示在表上。现在，如果搜索再次没有任何内容，那么它应该显示存在的默认数据。有什么办法吗？

Answer 1

最简单的方法是在render方法中创建一个包含过滤后的props.datalist的变量，并将其用于显示。

类似

render(){
   const { datalist:{content} } = this.props;
   const { search } = this.state;
   const filteredList = content.filter(job=>Object.values(job).some(value=>value.includes(search)));

   return (<div>
     //whatever
     {filteredList.map(job=>....)}
   </div>)
}

您还可以在onInputChnage中进行过滤，并将过滤后的列表存储在本地state中。

React在输入的Onchange上搜索对象数组中的文本

1 个答案: