[英]TypeError: Cannot read property 'includes' of undefined (React Fetching From Database)
I have issues with this function that it worked well with dummydatabase.js file that I created but when I fetched from the database, it just stopped working...我对这个函数有问题,它与我创建的 dummydatabase.js 文件配合得很好,但是当我从数据库中获取时,它就停止工作了......
I thought it was not fetching properly, but it's working fine.我认为它没有正确获取,但它工作正常。 I don't understand why it's not working...
我不明白为什么它不起作用......
Please help and thank you in advance!请帮助并提前感谢您!
Edit: This is the Error that I get.编辑:这是我得到的错误。 I'm sorry if my question was not clear!
如果我的问题不清楚,我很抱歉! ^^;
^^;
Edit2: Here's the code for the entire page. 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;
Your name field value getting as undefined.您的姓名字段值变得未定义。
try this one,试试这个,
const filteredGroups = groups.filter(group => {
console.log("FilteredGroup");
console.log(group);
return group.name?.includes(searchfield); //adding "?" mark
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.