类型错误：无法读取未定义的属性“包括”（从数据库中获取反应）

我对这个函数有问题，它与我创建的 dummydatabase.js 文件配合得很好，但是当我从数据库中获取时，它就停止工作了......

我认为它没有正确获取，但它工作正常。我不明白为什么它不起作用......

请帮助并提前致谢！

编辑：这是我得到的错误。如果我的问题不清楚，我很抱歉！^^;

Edit2：这是整个页面的代码。

import React, { useState, useEffect } from 'react';
import SearchBox from '../components/SearchBox';
//import Group from '../components/Group';
import GroupList from '../components/Group/GroupList';
//import './App.css';
import { exportedgroups } from '../dummyGroups';

function GroupBox() {


    const [groups, setGroups] = useState([]);
    const [searchfield, setSearchfield] = useState('');



    useEffect(() => {
        fetch('http://localhost:3000/groups/get_all_groups')
            .then(response => response.json())
            .then(groups => { setGroups(groups.data.groups);
                console.log('GroupBox');
                console.log(groups.data.groups)
                console.log('exportedgroups');
                console.log(exportedgroups);
            });

        // setGroups(exportedgroups);
        // console.log("local data" + exportedgroups);

        // const getAllGroups = async () => {
        //     let groupData = await fetch('http://localhost:3000/groups/get_all_groups');
        //     let groupList = await groupData.json();
        //     setGroups(groupList.data.groups);
        // }

        // getAllGroups();
    }, []);

    console.log(groups);
    const onSearchChange = (event) => {
        setSearchfield(event.target.value);
    }
    const filteredGroups = groups.filter(group => {
        console.log("FilteredGroup");
        console.log(group);
        return group.name.includes(searchfield);
    });

    return (
        <div className='GroupBox'>
            <div className='flex'>
                <div className='flex flex-column'>
                    <div className='flex justify-start fw1 f3'>
                        Groups
                        </div>
                    <div className='flex justify-start'>
                        <SearchBox searchChange={onSearchChange} />
                    </div>
                    <div className='GroupList'>
                        <GroupList groups={filteredGroups} />
                    </div>
                </div>
            </div>

        </div>
    );

}

export default GroupBox;