正在为我的表添加搜索栏，但当前不起作用

Question

import React, { useEffect, useState }  from "react";
function Table(){
const [getData,setData]=useState([]);
const [search, setSearch] =useState('')
//Getting user data
useEffect(()=>{
fetch("http://localhost:5000/students/getStudents")
.then(resp=>resp.json())
.then(data=> setData(data))
},[]);

const changeHandler = (event)=>{
setSearch(event.target.value)
}
const searchOp = getData.filter((data)=>{
return data.includes(search)
})

return(
<div className='table_content'>
<input type='text' value={search} onChange={changeHandler} placeholder='Search'/>
<table>
<tr>
<th>Registration Number</th>
<th>Name</th>
<th>Grade</th>
<th>Subjects</th>
</tr>
{searchOp.map(data=>
<tr key={data._id}>
<td>{data.registrationNumber}</td>
<td>{data.name}</td>
<td>{data.grade}</td>
<td>{data.subjects}</td>
</tr>
)}
</table>
</div>
)
}
export default Table;

当前错误：

[Error]TypeError:data.includes不是函数。(在"data.includs(search("，"data.incurds"未定义(commitRootImpl(bundle.js:36197(commitRoot(bundle.js:35989(finishConcurrender(bundle.js:35198(performConcurrentWorkOnRoot(bundle.js:35116(performConcurrentWorkOnRoot workLoop(bundle.js:44067(flushWork(bundle.js:44041(performWorkUntilDeadline(bundle.js:44325(

Answer 1

问题是您的API调用是异步的，而react会立即呈现组件，然后在收到数据时重新呈现。这意味着在第一次渲染时，return data.includes(search)将接收如const [getData,setData]=useState([]);中定义的空数组，这反过来意味着data将是未定义的，并且includes()实际上不是undefined的函数。

一个可能的解决方案是：

1. 对您的方法进行null检查：

const searchOp = getData.filter((data)=>{
return data?.includes(search)
})

2. 有条件地渲染searchOp

{getData.length > 0 && searchOp.map(data=>
<tr key={data._id}>
<td>{data.registrationNumber}</td>
<td>{data.name}</td>
<td>{data.grade}</td>
<td>{data.subjects}</td>
</tr>
)}

Answer 2

所以我更改了searchOp函数，目前正在工作。但这种感觉可能会导致以后出现问题。请告知这是否是一个好的解决方案

const searchOp = getData.filter((data)=>{
if(Object.values(data).includes(search)){
return search;
}
else if(search===""){
return getData;
}
})