使用过滤器 function 搜索数据不起作用

Question

我在渲染过滤器 function 时遇到问题。我认为问题是我没有返回 smth，但我不太确定。 我正在使用 React 和一个 json 文件来显示数据。 这是我在控制台上收到的警告“react-jsx-dev-runtime.development.js:117 警告：列表中的每个子项都应该有一个唯一的“key”道具。

检查SearchTable的渲染方法。 有关详细信息，请参阅https://reactjs.org/link/warning-keys 。 在 tr"

代码：

import data from "../data.json";

const SearchTable = () => {
    const [searchTerm, setSearchTerm] = useState("");

  return (
    <div className="container">
      <input 
      type="text"
       placeholder="Search..." 
       className="form-control" 
       style ={{marginTop:50 ,marginBottom: 20, width : "40%"}} 
       onChange= {(e)=>{
        setSearchTerm(e.target.value); 
      }}
       />

      <table className="table table-bordered">
        <thead className="thead-dark">
          <tr>
            <th>Number</th>
            <th>PartitionId</th>
            <th>enqueueTime</th>
          </tr>
        </thead>
        <tbody>
          {data.filter((val) => {
              if(searchTerm === ""){
                  return val;
              } 

              else if (
                  val.partitionId === searchTerm ||
                  val.enqueueTime === searchTerm
                
              ) {
                console.log("hej")
                  return val;
                  
              }
          }).map((m) => (
            <tr key={m.id}>
              <td>{m.Nr}</td>
              <td>{m.partitionId}</td>
              <td>{m.enqueueTime}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default SearchTable;```

Answer 1

filter function 应该返回boolean 。
此外，列表的key属性应更改为partitionId 。

尝试像这样更改您的代码：

{
  data
    .filter((val) => {
      if (searchTerm === '') {
        return true;
      }
      if (
        val.partitionId.toUpperCase().includes(searchTerm.toUpperCase()) ||
        val.enqueueTime.toUpperCase().includes(searchTerm.toUpperCase())
      ) {
        return true;
      }
    })
    .map((m) => (
      <tr key={m.partitionId}>
        <td>{m.Nr}</td>
        <td>{m.partitionId}</td>
        <td>{m.enqueueTime}</td>
      </tr>
    ));
}

Answer 2

如果我是你，我会从模板中删除业务逻辑。 更重要的是，如果条目应该放在过滤后的数组中，则传递给过滤器方法的 function 应该返回 true，否则返回 false。 我在代码下面放了一个通用过滤器 function。 还有一件事，如果字符串为空，则没有理由在数组上调用过滤器。 如果您不想过滤，请不要使用CPU，如果您不需要；）

PS。 您在渲染项目时使用了不存在的 object 键。 将其更改为 Nr 或 partitionId。

聚苯乙烯。 我们应该将搜索到的字符串更改为小写，数据 object 中的条目也应如此。

干杯，如果您有任何问题。 我很乐意回答他们。

import data from "../data.json";
import React, { useState, useEffect } from 'react';

const SearchTable = () => {
    const [searchTerm, setSearchTerm] = useState("");
    const [filteredData, setFilteredData] = useState(data);
  
    const filterData = () => {
      if (searchTerm === '') {
        setFilteredData(data);
        return;
      }
      
      setFilteredData(data.filter(entry => {
        return Object.keys(entry).some(entryKey => {
          const entryValue = entry[entryKey].toString().toLocaleLowerCase();
          
          return entryValue.contains(searchTerm);
        })
      }));
    };
  
    useEffect(filterData, [searchTerm]);

  return (
    <div className="container">
      <input 
      type="text"
       placeholder="Search..." 
       className="form-control" 
       style ={{marginTop:50 ,marginBottom: 20, width : "40%"}} 
       onChange= {(e)=>{
        setSearchTerm(e.target.value.toLocaleLowerCase()); 
      }}
       />

      <table className="table table-bordered">
        <thead className="thead-dark">
          <tr>
            <th>Number</th>
            <th>PartitionId</th>
            <th>enqueueTime</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map((m) => (
            <tr key={m.Nr}>
              <td>{m.Nr}</td>
              <td>{m.partitionId}</td>
              <td>{m.enqueueTime}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default SearchTable;