Реагируйте на поиск текста в массиве объектов на обмен ввода

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"
    }]
}

В этом у меня есть эти данные, поступающие из моего `избыточного состояния.Таким образом, я показываю это пользователю в форме таблицы, передавая это как реквизит.

У меня есть поле поиска:

<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.