javascript - React - 将搜索添加到表中，正确的方法？

Question

我在 React 中为我的表添加了一个搜索功能，以过滤掉从外部网络服务获取的项目。由于我不想在您每次搜索项目时调用 API，我想我会将检索到的数据分配给两个不同的 useState Hook 。

一个保存完整的数据集，另一个包含基于搜索的筛选项。

我可以在不使用 2 个钩子(Hook)的情况下编写更简洁的代码吗？代码处理此问题的方式有任何副作用吗？

欢迎任何意见。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Table from '@mui/material/Table';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';
import DeleteIcon from '@mui/icons-material/Delete';
import TextField from '@mui/material/TextField';

export default function ShowProject() {
    const [data, setData] = useState([]);
    const [filter, setFilter] = useState([])

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'http://127.0.0.1:5000/pr'
            );
            setData(result.data);
            setFilter(result.data);
        }
        fetchData()
        
    }, []);

    const requestSearch = (searchedVal) => {
        const filteredRows = data.filter((row) => {
            return row.customer.toString().toLowerCase().includes(searchedVal.toString().toLowerCase());
        });
        if (searchedVal.length < 1) {
            setFilter(data)
        }
        else {
            setFilter(filteredRows)
        }
      };
    
    return (
        <div>
            <div>
                <TextField onChange={(e) => requestSearch(e.target.value)} />
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>Project</TableCell>
                            <TableCell>Code</TableCell>
                            <TableCell>Customer</TableCell>
                            <TableCell></TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {filter.map(item => (
                            <TableRow key={item.db_id}>
                                <TableCell>{item.project_name}</TableCell>
                                <TableCell>{item.project_code}</TableCell>
                                <TableCell>{item.customer}</TableCell>
                                <TableCell><DeleteIcon /></TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
        </div>
    )
}

Answer 1

我没有看到使用 filter 状态变量的任何特殊原因。每次 TextField 更改时，您都在扫描 data 并将过滤后的结果分配给 filter，那么为什么不直接在 JSX 中进行过滤呢？而不是将查询 文本存储为状态？更具体地说，类似于以下内容:

  const [searchedVal, setSearchedVal] = useState("");

  return (
    <div>
      <div>
        {/* simply set the query text here instead of triggering requestSearch */}
        <TextField onChange={(e) => setSearchedVal(e.target.value)} />
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Project</TableCell>
              <TableCell>Code</TableCell>
              <TableCell>Customer</TableCell>
              <TableCell></TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data
              .filter((row) =>
                // note that I've incorporated the searchedVal length check here
                !searchedVal.length || row.customer
                  .toString()
                  .toLowerCase()
                  .includes(searchedVal.toString().toLowerCase()) 
              )
              .map((item) => (
                <TableRow key={item.db_id}>
                  <TableCell>{item.project_name}</TableCell>
                  <TableCell>{item.project_code}</TableCell>
                  <TableCell>{item.customer}</TableCell>
                  <TableCell>
                    <DeleteIcon />
                  </TableCell>
                </TableRow>
              ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );