Почему ошибка проекта:TypeError: Cannot read property 'filter' of undefined? Как исправить? Может я что-то не так делаю?

Question

[nathan111777]

Здраствуйте. Изучал React, и вот настал момент когда я начал делать свой первый сайт на реакте. Сказать что встретился с трудностями это ничего сказать. Самое сложное оказалось слепить все компоненты, все свои наработки, в один сайт. Хотя уже как-то потихоньку что-то да получается. Но появилась такая ошибка:


Сразу извиняюсь что бросаю код не в песочнице, но подругому не могу так как почему-то песочницы ругаются на react-router:
Напишу только три главных файла проекта, они не очень большие.

App.js:

import React from "react";
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Link, Switch} from "react-router-dom";
import createBrowserHistory from "history/createBrowserHistory";
import './App.css';
import Header from "./smallComponents/Header.js";
import Footer from "./smallComponents/Footer.js";
import Home from "./pageComponents/Home.js";
import About from "./pageComponents/About.js";
import Contacts from "./pageComponents/Contacts.js";
import {carsArray} from "./pageComponents/Home.js";

const history = createBrowserHistory();

class App extends React.Component {
  render(){ 
    return (
      <BrowserRouter history={history}> 
         <div className="wrapper">
        
        <Header/>
        
        <Home attributeApp={carsArray} />
    
            <Switch>
              <Route exact path="/" component={Home} /> 
              <Route path="/about" component={About} />
              <Route path="/contacts" component={Contacts} />
            </Switch>
    
        <Footer/>          
        
       </div>
    </BrowserRouter>
   )
  }
}

export default App;

Home.js:

import React from "react";
import {BrowserRouter, Route, Link} from "react-router-dom";
import '../App.css';
import CarsList from "./CarsList.js";

let carsArray = [
{
    id:1,
    name: 'BMW',
    phone: '555 555 5555'
}, 
{
    id:2,
    name: 'Mercedes',
    phone: '555 111 5555'
},
{
    id:3,
    name: 'Audi',
    phone: '555 777 5555'
},
{
    id:4,
    name: 'Ford',
    phone: '555 888 5555'
}
]

class Home extends React.Component {
  render(){ 
    return (
       <CarsList attributeCarsList={this.props.attributeApp}/>
   );
  }
}

export default Home;
export {carsArray};

CarsList.js:

import React from 'react';
import Car from './Car';

class CarsList extends React.Component  {
    constructor() {
        super();
        this.state = {
           search: ""
        };
    }
    updateSearch(event) {
        this.setState({search:event.target.value.substr(0,100)})
    }
 
render(){
    let filterCars = this.props.attributeCarsList.filter(
        (contact) => {
            return contact.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
        }
        );
  return (
    <div>
      <input type="text" value={this.state.search} onChange={this.updateSearch.bind(this)}/>
      {filterCars.map((argumentMap)=>{
       return <Car attributeCar={argumentMap}/>
      })}
    </div>
  );
 }
}

export default CarsList;

а файл index.js просто рендерит в DOM компоент App.

Answer 1

[h88p]

Зачем вы из Home.js импортируете carsArray и затем его же передаете в сам Home.js через пропы, смысл?

Comments

[nathan111777]

а как мне сделать? мне нужно чтобы при нажатти на link Home выводился список машин, а когда я нажимаю на линки about или contacts то другой текст выводился на месте контента.
Вот так при нажатии на link home:

[h88p]

nathan111777, Убрать в App.js
<Home attributeApp={carsArray} />
И в Home.js вместо props передавать carsArray
<CarsList attributeCarsList={carsArray}/>

[nathan111777]

h88p, работает) спасибо вам огромное! успехов вам!

Answer 2

[Сергей Мелодин]

Добавить сверху две проверки:

if (!this.props.attributeCarsList) {
  throw Error('отсутствует attributeCarsList')
}
if (!Array.isArray(this.props.attributeCarsList)) {
  throw Error(`attributeCarsList не массив, а ${typeof this.props.attributeCarsList}`)
}
и всё станет понятнее

Comments

[nathan111777]

а как мне сделать правильно? что исправить? Мне нужно чтобы при нажатти на link Home выводился список машин, а когда я нажимаю на линки about или contacts то другой текст выводился на месте контента.
Вот так при нажатии на link home: