0

我正在尝试创建一个可以按标题或日期排序的动态搜索。现在我的代码专注于标题，一旦我开始工作，我将复制它以使日期也工作。但是，现在，我的过滤方法不起作用，我不知道如何在不破坏地图功能的情况下修复它。

我目前收到"Cannot read property 'toLowerCase' of undefined"。它指的是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;
4

0 回答 0