reactjs中过滤表数据

如何解决reactjs中过滤表数据

我有一张包含学生详细信息的表格。当我对其应用过滤器方法时，它会变得一团糟。我不明白我是如何为 table 创建 ui 的。有人可以帮我解决这个问题

const studentList = (props) => {
    return (
      <div>
        <input
          type="text"
          placeholder="Search"
          onChange={(event) => {
            setSearchTerm(event.target.value);
          }}
        />
        {students &&
          students
            .filter((student) => {
              if (searchTerm === "") {
                return student;
              } else if (
                student.admissionNumber
                  .toLowerCase()
                  .includes(searchTerm.toLowerCase())
              ) {
                return student;
              }
            })
            .map((student,index) => {
              return (
                <div className="table-responsive table-scroll ">
                  <table className="table tbl table-bordered   .w-auto mb-0 ">
                    <thead className="thead">
                      <tr className="" key={index}>
                        <th>#</th>
                        {/some heading stuff/}
                    </thead>
                    <tbody className="tbody">
                      <tr>
                        <th key={index}>{index + 1}</th>
                        <td scope="row">{student.admissionNumber}</td>

                        <td>{student.fullName}</td>
                        <td>{student.email}</td>
                        <td>{student.faculty.name}</td>
                        <td>
                          <span className="btn-group">
                            {/buttons/}
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              );
            })}
      </div>
    );
  };

当我运行它时，它看起来像一团糟

我想要这个用户界面

解决方法

您需要将表格放在 { "@context": { "@vocab": "http://schema.org/","goog": "http://schema.googleapis.com/","resultScore": "goog:resultScore","detailedDescription": "goog:detailedDescription","EntitySearchResult": "goog:EntitySearchResult","kg": "http://g.co/kg" },"@type": "ItemList","itemListElement": [ { "@type": "EntitySearchResult","result": { "@id": "kg:/m/0dl567","name": "Taylor Swift","@type": [ "Thing","Person" ],"description": "Singer-songwriter","image": { "contentUrl": "https://t1.gstatic.com/images?q=tbn:ANd9GcQmVDAhjhWnN2OWys2ZMO3PGAhupp5tN2LwF_BJmiHgi19hf8Ku","url": "https://en.wikipedia.org/wiki/Taylor_Swift","license": "http://creativecommons.org/licenses/by-sa/2.0" },"detailedDescription": { "articleBody": "Taylor Alison Swift is an American singer-songwriter and actress. Raised in Wyomissing,Pennsylvania,she moved to Nashville,Tennessee,at the age of 14 to pursue a career in country music. ","url": "http://en.wikipedia.org/wiki/Taylor_Swift","license": "https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License" },"url": "http://taylorswift.com/" },"resultScore": 4850 } ] } 函数之外。

.map