未捕獲TypeError：無法讀取undefined屬性'filter'

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;

我是ReactJS的新手，所以我在這個問題上陷入困境。我意識到這個問題已被問及我通過他們所有，但仍無法找到解決方案，爲什麼我得到這個錯誤。我想根據searchValue篩選數組employees並顯示更新Employee Table。未捕獲TypeError：無法讀取undefined屬性'filter'

來源

2017-08-14 msd

就像所有其他問題一樣，這意味着您正在嘗試對未定義的變量使用某些東西。這意味着一個變量並不具有你認爲它的作用。確保'employees'實際上是一個數組（例如console.log） –

只需添加默認值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;

錯誤觸發時，不提供employees道具，或者null或undefined，當你提供的空Array的默認值時，Array.filter不會拋出錯誤，因爲默認employees的值是數組的一個實例

來源

2017-08-14 20:23:37

由於錯誤消息告訴你，問題在於你的常量employees未定義。問題將出現在您正在呈現HeaderSearch組件的位置。很可能你沒有通過你認爲你的道具。嘗試渲染<HeaderSearch employees={[]} />。它工作嗎？ console.log(this.props)告訴你什麼？你能看到鑰匙employees嗎？

如果您需要更多幫助，請將代碼放在您實際呈現HeaderSearch組件的位置。

來源

2017-08-14 20:11:45

這是HeaderSearch的完整代碼。我爲員工使用了console.log，它顯示它未定義。我應該在哪裏定義這個代碼中的數組？ – msd

您不應該在'HeaderSearch'代碼中定義數組。您的代碼期望在您使用組件時將'employees'作爲屬性提供。就像'} />。這將使empoyees在'this.props.employees'中可用。 –

也作爲@Medet Tleukabiluly在他的答案中提到，你可以使用'defaultProps'來設置默認值。 –

未捕獲TypeError：無法讀取undefined屬性'filter'

回答

相關問題