javascript - TypeError：对象不是函数或其返回值不可迭代

Question

import '../Search.css';
import React, {setState} from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch } from '@fortawesome/free-solid-svg-icons'
import PrepodsList from './PrepodsList';
import prepods from "../Data";

const element = <FontAwesomeIcon icon={faSearch} />

const Search = () => {

    const [value, setValue] = setState('');
    const filteredNames = prepods.filter(prepod => {
        return prepod.name.toLowerCase().includes(value.toLowerCase())
    })
    

    return(
        <div className="search">
            <div className="input-container">
                <input placeholder="Name" type="text" onChange ={(event) => setState(event.target.value)}></input>
                <button onClick={this.addSearch}>{element}</button>
            </div>
            <div className="wrapper">
                {filteredNames.map(prepod => (
                <PrepodsList name={prepod.name} key={prepod.id} faculty={prepod.faculty} />
                ))}
            </div>
        </div>
    )
}

export default Search

这是我的组件！

我不知道如何解决这个问题。我不明白为什么我没有过滤我的列表。我阅读了很多信息，但仍然无法解决问题。

在此处输入图像描述

标签： javascriptreactjs