Reactjs 如何使用useEffect、useState、Typescript筛选列表

我有一个简单的React应用程序，在加载页面时显示一个包含名称和详细信息的表。为了从API中获取数据，我正在使用useffect（）。一切正常

现在我想实现一个过滤器，用户在其中输入名称（或部分名称），然后更新/过滤表

我尝试了一些代码，但我得到的唯一结果是获取数据，过滤数据，然后只显示过滤后的内容。但我想要的是，在页面加载时，将所有名字放在第一位，并在用户单击搜索按钮时进行筛选

您将如何实施它？ 提前谢谢

到目前为止，我的代码是：

const Search = () => {

   type FormData = {
      name: string
   }

   const [nameResponse, setNameResponse] = useState<NameResponse>()
   const [activePage, setActivePage] = useState(0)
   const { register, handleSubmit } = useForm<FormData>()
   const [searchName, setSearchName] = useState('')

   useEffect(() => {
      const params = {
         page: activePage,
         linesPerPage: 5
      }

      makeRequest({ url: `/names`, params })
         .then(response => setNameResponse(response.data))

   }, [activePage])

   const onSubmit = (data: FormData) => {
      setSearchName(data.name)

   }

   return (
      <div className="search-container">
         <div className="search-options">
            <form onSubmit={handleSubmit(onSubmit)}>
               <fieldset>
                  <legend>Search name:</legend>
                  <label htmlFor="name-input">Name:</label><br />
                  <input
                     type="text"
                     className="name-input"
                     name="name"
                     required
                     ref={register}
                  />
                  <ButtonIcon text="Search" />
               </fieldset>
              
            </form>
         </div>
         <div className="search-result">
            <h3 className="search-result-title">Search results</h3>
            <table className="table table-striped table-hover table-sm" cellPadding="0" cellSpacing="0">
               <thead className="thead-dark">
                  <tr>
                     <th>NAME</th>
                     <th>MEANING</th>
                     <th>GENDER</th>
                     <th>ORIGIN</th>
                  </tr>
               </thead>
               <tbody>
                  {nameResponse?.content.map(nameData => (
                     <tr key={nameData.id}>
                        <td>{nameData.name}</td>
                        <td>{nameData.meaning}</td>
                        <td>{nameData.gender}</td>
                        <td>{nameData.origin.name}</td>
                     </tr>
                  ))}
               </tbody>
            </table>
            {nameResponse &&
               <Pagination
                  totalPages={nameResponse.totalPages}
                  activePage={activePage}
                  onChange={page => setActivePage(page)}
               />
            }
         </div>

      </div>
   )

}

export default Search

const Search=（）=>{
类型FormData={
名称：string
}
常量[nameResponse，setNameResponse]=useState（）
常量[activePage，setActivePage]=useState（0）
常量{register，handleSubmit}=useForm（）
常量[searchName，setSearchName]=useState（“”）
useffect（（）=>{
常量参数={
页面：activePage，
线路页码：5
}
makeRequest（{url:`/names`，params}）
.then（response=>setNameResponse（response.data））
}，[activePage]）
const onSubmit=（数据：FormData）=>{
setSearchName（data.name）
}
返回(
搜索名称：
名称：

搜索结果
名称
意思
性别
起源
{nameResponse？.content.map（nameData=>(
{nameData.name}
{nameData.means}
{nameData.gender}
{nameData.origin.name}
))}
{name响应&&
setActivePage（第页）}
/>
}
)
}
导出默认搜索

只有当

searchName

不为空时，才必须应用筛选。

---

此外，还应该实现一种机制，用户可以在该机制中重置

searchName

。例如，您可以监听更改输入并在输入值为空（清除）时重置。

创建一个变量，该变量将等于对象[]，即您获取的数据，fi

filteredResponse

如果输入不是空的，则应用筛选

 let filteredResponse = nameResponse?.content;
  if (searchName) {
    filteredResponse = nameResponse?.content.filter((el: any) =>
      el.name.toLowerCase().includes(searchName)
    );
  }

如果使用大写字母，可选择将名称转换为小写

在输入上使用value和onChange事件侦听器

<input
   type="text"
   className="name-input"
   name="name"
   required
   value={searchName}
   onChange={(e: any) => setSearchName(e.target.value)}
              // ref={register}
  />

setSearchName（e.target.value）}
//ref={register}
/>

然后使用filterResponse值映射到获取的项目：

{filteredResponse?.map((nameData: any) => (
          <tr key={nameData.id}>
            <td>{nameData.name}</td>
            <td>{nameData.meaning}</td>
            <td>{nameData.gender}</td>
            <td>{nameData.origin.name}</td>
          </tr>
        ))}

{filteredResponse？.map（（nameData:any）=>(
{nameData.name}
{nameData.means}
{nameData.gender}
{nameData.origin.name}
))}

我对一些部分进行了评论，还使用了虚拟数据使其可复制：

---

在搜索时，您必须过滤数据并更新状态

setNameResponse（prev=>{…prev，content:prev.content.filter（val=>val.name==data.name）}）

它工作得很好，但由于我有分页功能，它只在第一页上搜索。我会试着适应它。谢谢！没有太多的信息来实现这一点。如果回答了您的问题，请接受答案。