Реагировать на динамический поиск / фильтр возвращает неопределенное - PullRequest
Новая
       26

Реагировать на динамический поиск / фильтр возвращает неопределенное

0 голосов
/ 13 декабря 2018

Я пытаюсь создать динамический поиск, который можно отсортировать по названию или дате.Прямо сейчас мой код сфокусирован на заголовке, и как только у меня это получится, я продублирую его, чтобы и дата работала.Однако сейчас мой метод фильтра не работает, и я не знаю, как это исправить, не нарушая функцию карты.

В настоящее время я получаю "Невозможно прочитать свойство 'toLowerCase' из неопределенного".Это относится к newsItem.title, но я не уверен, как это исправить. 

import React, { Component } from 'react';
import labNewsJson from '../json/labNews.json';
import '../styles/News.css';
var moment = require('moment');

const newsList = labNewsJson['news'];

class News extends Component {
    constructor() {
        super();
        this.state = {
            search: ''
        };
    }

updateSearch(event) {
    this.setState({ search: event.target.value }) 
}
render() {
    // let filteredNews = this.props.newsList;
            newsList.sort(function(a, b) {
                var dateA = new Date(a.date), dateB = new Date(b.date);
                return dateB - dateA;
            });

            let filteredNews = newsList.filter((newsItem) => {
                return newsItem.title.toLowerCase().includes(this.state.search.toLowerCase())
                }
            );
            const news = filteredNews.map((newsItem, index) => {
                return <div className='newsContainer' key={index}><h3>{newsItem.title}</h3><p><strong>{newsItem.description}</strong><br></br>{moment(newsItem.date).format("LL")}</p></div>
            });


    return (

            <div className='container'>
                <div className='pageTitle'><h1>Lab News</h1></div>

                 <div>{news}</div>
            <input type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} />

            </div>
        );
 }
}

export default News;
...