Javascript 未捕获类型错误：无法读取属性'；过滤器'；未定义的 import React，{PureComponent}来自'React'； 从“../../shared”导入{TextInput}； 从“属性类型”导入{array}； 从“../EmployeeTable/EmployeeTable”导入{EmployeeTable}； 导入“/HeaderSearch.scss”； 导出类标题搜索扩展了PureComponent{ 静态类型={ 员工：array } 建造师（道具）{ 超级（道具）； 此.state={ searchValue:null }; } _updateSearchValue（值）{ 这是我的国家({ searchValue:value }); } 渲染（）{ const employees=this.props.employees； 让filteredEmployees=employees.filter( （雇员）=>{ 返回employee.name.indexOf（this.state.searchValue）！=-1； } ); 返回( {filteredEmployees.map（（employee）=>{ 返回； })} 这是.\u updateSearchValue（e.target.value）} /> ); } } 导出默认标题搜索；

我是ReactJS的新手，所以我被困在这个问题上了。我意识到有人问过我这个问题，我把所有的问题都看了一遍，但仍然找不到解决问题的办法，为什么我会犯这个错误。我想根据

搜索值

过滤数组

员工

，并显示更新

员工表

错误消息告诉您，问题是您的常量

employees

未定义。问题将出现在渲染

HeaderSearch

组件的位置。最有可能的是，你没有通过你认为你是道具。尝试渲染

。它有用吗？

console.log（this.props）

向您展示了什么？你能在那里看到钥匙

员工吗

如果您需要更多帮助，请将代码张贴在实际渲染
HeaderSearch
组件的位置。
只需为
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 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;

import React，{PureComponent}来自'React'；
从“../../shared”导入{TextInput}；
从“属性类型”导入{array}；
从“../EmployeeTable/EmployeeTable”导入{EmployeeTable}；
导入“/HeaderSearch.scss”；
导出类标题搜索扩展了PureComponent{
静态defaultProps={//与此错误的所有其他问题一样，这意味着您试图在未定义的变量上使用某些内容。这意味着变量不包含您认为的内容。请确保
employees
实际上是一个数组（例如console.log it）这是HeaderSearch的全部代码。我对employees使用了console.log，它表明它未定义。我应该在这段代码中定义数组吗？您不应该在
HeaderSearch
code中定义数组。您的代码希望在使用组件时将
employees
作为属性提供。类似于
is将使员工在
this.props.employees`.中可用。正如@Medet Tleukabiluly在其回答中提到的，您可以使用
defaultProps

设置默认值。

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;