Uncaught TypeError: Cannot read property 'filter' undefined

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;

Ich bin ein Neuling in ReactJS, also bin ich stecken, dieses problem. Ich habe bewusst diese Frage gestellt wurde und ich sah durch Sie alle, aber noch konnte Sie nicht finden, eine Lösung, warum bin ich immer diese Fehlermeldung. Ich möchte filter array employees nach der searchValue - und display-update Employee Table.

  • Gut wie alle anderen Fragen, die mit diesem Fehler, es bedeutet, dass Sie versuchen, etwas auf eine variable, die nicht definiert ist. Also eine variable, die nicht halten, was Sie denken, es tut. Stellen Sie sicher, dass employees ist eigentlich ein array (zB Konsole.melden Sie es)
InformationsquelleAutor msd | 2017-08-14
  1. 1

    Nur add default-Wert für 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;

    Fehler wird ausgelöst, wenn employees requisite ist nicht vorhanden, oder null oder undefined, wenn Sie Standard-Wert leeren Arrays, die Array.filter nicht werfen Fehler, weil default-Wert employees ist eine Array-Instanz

    InformationsquelleAutor Medet Tleukabiluly
  2. 2

    Wie die Fehlermeldung sagt, das problem ist, dass Ihr konstant employees ist nicht definiert. Das problem wird sein, an einem Ort, wo Sie sind-rendering HeaderSearch Komponente. Wahrscheinlich sind Sie nicht übergeben werden, die Requisiten, die Sie denken, Sie sind. Versuchen zu Rendern<HeaderSearch employees={[]} />. Funktioniert es? Was bedeutet console.log(this.props) zeigen Sie? Können Sie sehen, key employees es?

    Wenn Sie weitere Hilfe benötigen, bitte poste den code, wo Sie tatsächlich Rendern HeaderSearch Komponente.

    • Das ist der komplette code für die HeaderSearch. Ich benutzt die Konsole.Protokoll für Mitarbeiter und es zeigt, dass es nicht definiert. Wo muss ich das definieren, das array in diesem code?
    • Sie sollten nicht definieren, das array in HeaderSearch code. Ihr code erwartet employees gegeben werden, als eine Eigenschaft, wenn Sie die Komponente. So etwas wie <HeaderSearch employees={<any-array-of-employees>} />. This will make empoyees available in diese.Requisiten.Mitarbeiter`.
    • Auch als @Medet Tleukabiluly erwähnt in seiner Antwort, die Sie verwenden können defaultProps zu setzen, default-Wert.
    • ja, das funktioniert besser. vielen Dank 🙂
    InformationsquelleAutor Marek Takac
Schreibe einen Kommentar