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;

Saya seorang pemula di ReactJS jadi saya terjebak dalam masalah ini. Saya menyadari pertanyaan ini telah diajukan dan saya memeriksa semuanya tetapi masih tidak dapat menemukan solusi mengapa saya mendapatkan kesalahan ini. Saya ingin memfilter array employees sesuai dengan searchValue dan menampilkan pembaruan Employee Table.

2
msd 14 Agustus 2017, 23:01

2 jawaban

Jawaban Terbaik

Cukup tambahkan nilai default untuk 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;

Kesalahan dipicu saat prop employees tidak disediakan, atau null atau tidak ditentukan, saat Anda memberikan nilai default Array kosong, Array.filter tidak akan memunculkan kesalahan, karena nilai default employees adalah contoh Array

2
Medet Tleukabiluly 14 Agustus 2017, 20:23

Seperti yang diberitahukan oleh pesan kesalahan, masalahnya adalah konstanta Anda employees tidak terdefinisi. Masalahnya akan berada di tempat Anda merender komponen HeaderSearch. Kemungkinan besar Anda tidak memberikan alat peraga yang Anda pikirkan. Cobalah untuk merender<HeaderSearch employees={[]} />. Apakah itu bekerja? Apa yang console.log(this.props) tunjukkan kepada Anda? Bisakah Anda melihat kunci employees di sana?

Jika Anda memerlukan bantuan lebih lanjut, harap kirimkan kode tempat Anda sebenarnya merender komponen HeaderSearch.

2
Marek Takac 14 Agustus 2017, 21:15