javascript - Uncaught TypeError: Cannot read property 'filter' of undefined - Stack Overflow

admin管理员组

文章数量:1357672

import React, {PureComponent} from 'react';
import {TextInput} from '../../shared';
import {array} from 'prop-types';
import { EmployeeTable } from '../employeeTable/EmployeeTable';
import './HeaderSearch.scss';

export class HeaderSearch extends PureComponent {
    static propTypes = {
        employees: array
    }

    constructor (props) {
        super(props);

        this.state = {
            searchValue: null
        };
    }

    _updateSearchValue (value) {
        this.setState({
            searchValue: value
        });
    }

    render () {
        const employees = this.props.employees;
        let filteredEmployees = employees.filter(
                (employee) => {
                    return employee.name.indexOf(this.state.searchValue) !== -1;
                }
            );
        return (
            <div className='header_search'>
                <ul>
                    {filteredEmployees.map((employee) => {
                        return <EmployeeTable
                            employees={employee}
                            key={employee.id}
                            />;
                    })}
                </ul>
                <TextInput
                    label='Search for people'
                    value={this.state.searchValue}
                    onChange={(e) => this._updateSearchValue(e.target.value)}
                    />
            </div>
        );
    }
}
export default HeaderSearch;

I'm a newbie at ReactJS so I'm getting stuck on this problem. I realize this question has been asked and I looked through them all but still couldn't find a solution as to why I'm getting this error. I want to filter the array employees according to the searchValue and display the update Employee Table.

import React, {PureComponent} from 'react';
import {TextInput} from '../../shared';
import {array} from 'prop-types';
import { EmployeeTable } from '../employeeTable/EmployeeTable';
import './HeaderSearch.scss';

export class HeaderSearch extends PureComponent {
    static propTypes = {
        employees: array
    }

    constructor (props) {
        super(props);

        this.state = {
            searchValue: null
        };
    }

    _updateSearchValue (value) {
        this.setState({
            searchValue: value
        });
    }

    render () {
        const employees = this.props.employees;
        let filteredEmployees = employees.filter(
                (employee) => {
                    return employee.name.indexOf(this.state.searchValue) !== -1;
                }
            );
        return (
            <div className='header_search'>
                <ul>
                    {filteredEmployees.map((employee) => {
                        return <EmployeeTable
                            employees={employee}
                            key={employee.id}
                            />;
                    })}
                </ul>
                <TextInput
                    label='Search for people'
                    value={this.state.searchValue}
                    onChange={(e) => this._updateSearchValue(e.target.value)}
                    />
            </div>
        );
    }
}
export default HeaderSearch;

I'm a newbie at ReactJS so I'm getting stuck on this problem. I realize this question has been asked and I looked through them all but still couldn't find a solution as to why I'm getting this error. I want to filter the array employees according to the searchValue and display the update Employee Table.

• javascript
• reactjs
• user-interface
• filter

Share Improve this question Follow edited Aug 14, 2017 at 21:52 ecain 1,30266 gold badges2525 silver badges5454 bronze badges asked Aug 14, 2017 at 20:01 msdmsd 4911 gold badge22 silver badges88 bronze badges 1

• Well like all other questions with this error, it means you are trying to use something on a variable that is undefined. Meaning a variable doesn't hold what you think it does. Make sure employees is actually an array (eg console.log it) – Patrick Evans Commented Aug 14, 2017 at 20:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Just add default value for HeaderSearch

import React, {PureComponent} from 'react';
import {TextInput} from '../../shared';
import {array} from 'prop-types';
import { EmployeeTable } from '../employeeTable/EmployeeTable';
import './HeaderSearch.scss';

export class HeaderSearch extends PureComponent {

    static defaultProps = { // <-- DEFAULT PROPS
        employees: []       // undefined gets converted to array,render won't trigger error
    }

    static propTypes = {
        employees: array
    }

    constructor (props) {
        super(props);

        this.state = {
            searchValue: null
        };
    }

    _updateSearchValue (value) {
        this.setState({
            searchValue: value
        });
    }

    render () {
        // omitted
    }
}
export default HeaderSearch;

Error triggers when employees prop is not provided, or null or undefined, when you provide default value of empty Array, the Array.filter won't throw error, because default value of employees is an instance of Array

As the error message tells you, problem is that your constant employees is undefined. The problem will be in a place where you are rendering HeaderSearch ponent. Most likely you are not passing it the props you think you are. Try to render<HeaderSearch employees={[]} />. Does it work? What does console.log(this.props) show you? Can you see key employees there?

If you need more assistance please post the code where you are actually rendering HeaderSearch ponent.

本文标签： javascriptUncaught TypeError Cannot read property 39filter39 of undefinedStack Overflow