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

Question

我对这个函数有疑问，它与我创建的 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>

Answer 1

您的姓名字段值未定义。试试这个，const filteredGroups = groups.filter(group => {&nbsp; &nbsp; console.log("FilteredGroup");&nbsp; &nbsp; console.log(group);&nbsp; &nbsp; return group.name?.includes(searchfield); //adding "?" mark&nbsp;});