我是 React 的新手，我正在开发一个小项目，该项目使用搜索栏来查找从数据库中获取的数据。

我尝试的代码如下：

function Posts() {

    const [notes, setNotes] = useState([]);

    useEffect(()=>{
        getAllNotes();
    }, []);

    const getAllNotes = async () => {
        await axios.get(`/buyerPosts`)
            .then ((response)=>{
                const allNotes=response.data.existingPosts;
                setNotes(allNotes);
            })
            .catch(error=>console.error(`Error: ${error}`));
    }
    console.log(notes);

    const filterData = (postsPara, searchKey) => {
        const result = postsPara.filter(
            (notes) =>
                notes?.address.toLowerCase().includes(searchKey) ||
                notes?.contact.toString().toLowerCase().includes(searchKey)
        );
        setNotes(result);
    };

    const handleSearchArea = (e) => {
        const searchKey = e.currentTarget.value;

        axios.get(`/buyerPosts`).then((res) => {
            if (res?.data?.success) {
                filterData(res?.data?.existingPosts, searchKey);
            }
        });
    };

    return(
        <div className="posts-b">
            <div className="posts__container-b">
                <div className="search-box">
                    <input type="text" placeholder="What are you looking for?" onChange={handleSearchArea}></input>
                    <i className="fas fa-search"></i>
                </div>
                <main className="grid-b">
                    {notes.map((note,index)=> (
                        <article>
                            <div className="text-b">
                                <h3>Post ID: {index + 1}</h3>
                                <p>Location: {note.address}</p>
                                <p>Post Type: {note.postType}</p>
                                <p>Address: {note.address}</p>
                                <p>Telephone No: {note.contact}</p>
                            </div>
                        </article>         
                    ))}
                </main>
            </div>
        </div>
    );
}

export default Posts;

从第一个 API 调用，我获得了一个长度为 10 的对象数组。此图显示了我从第一个 API 调用中获得的数据。

如上图所示，在所有 10 个数组中还有另一个称为 wasteItemList 的对象数组。我正确创建了搜索函数，并且可以使用以下代码 notes?.address.toLowerCase().includes(searchKey) || notes?.contact.toString().toLowerCase().includes(searchKey) 搜索上述长度为 10 的对象数组中的数据。然后，我尝试修改上述代码以像这样 notes?.wasteItemList?.item.toLowerCase().includes(searchKey) || notes?.wasteItemList?.wasteType.toLowerCase().includes(searchKey) 搜索 wasteItemList 数组内的数据。但是它不起作用，并出现错误“未处理的拒绝（TypeError）：无法读取未定义的属性‘toLowerCase’”。

导致此问题的原因是什么。是否无法在另一个对象数组中已经存在的对象内部数组中搜索数据？如果可能的话我该如何解决这个问题？

也欢迎对代码提出任何其他评论。我来这里是为了学习。

谢谢！