根据输入中的每个字母过滤数组 [英] filtering array based on each letter from input

问题描述

我正在根据文本框中的输入过滤一系列学生.当您输入名字时，我该如何使它显示给学生?我的解决方案正在工作，但是很显然，如果要退格，则不会重新填充学生数组.当您键入学生的姓名时，当退格时如何过滤该数组?

I am filtering an array of students based on input from the textbox. How can I get this to work to show students as you type out the first name? My solution is working, but obviously, if you were to backspace, the student array does not re populate. How can I get this to filter as you type the name of the student and also repopulate the array when you backspace?

function App() {
  const [student, setStudent] = useState([]);

  useEffect(() => {
    fetch(api)
      .then((response) => response.json())
      .then((result) => {
        setStudent(result.students);
        
      })
      .catch((err) => {
        console.error(err);
      });
  }, [setStudent]);

  const filter = (e) => {
    for (let i = 0; i < student.length; i++) {
      const searchedStudent = student.filter((name) => {
        return name.firstName.toLowerCase().includes(e.target.value);
      });

      setStudent(searchedStudent);
    }
  };

  return (
    <>
      <input
        placeholder="Search by name"
        type="text"
        className="filter-students"
        onChange={filter}
      />
      {student.map((students) => {
        let total = 0;
        for (let i = 0; i < students.grades.length; i++) {
          total += parseInt(students.grades[i]);
        }

        const average = total / students.grades.length;
        console.log(average);

        return (
          <ul className="student-container">
            <img className="student-img" src={students.pic} />

            <div className="student-column">
              <li className="student-item">
                {" "}
                {students.firstName} {students.lastName}
              </li>
              <li className="student-item">Email: {students.email}</li>
              <li className="student-item">Company: {students.company}</li>
              <li className="student-item">Skill: {students.skill}</li>

              <li className="student-item">Average: {average}%</li>
            </div>
          </ul>
        );
      })}
    </>
  );
}

推荐答案

问题在于，每次<input>更改时，student状态都会更新.

The problem is student state gets updated every time the <input> changes.

请注意，过滤后的结果是来自原始数据的派生的数据.

Note that filtering results into a derived data coming from the original data.

因此，不需要将已过滤/派生的结果存储为状态.

Thus, NO NEED to store the filtered/derived results as a state.

相反，用于过滤的文本需要具有另一种状态.

Rather, you need to have another state for the text used for filtering.

const [student, setStudent] = useState([]);
const [filter, setFilter] = useState(""); // state for the text filter

<input
  placeholder="Search by name"
  type="text"
  className="filter-students"
  onChange={(e) => setFilter(e.target.value)}
/>

{students
  .filter((name) => name.firstName.toLowerCase().includes(filter)) // use filter state
  .map(/* Add elements here */)
}

这篇关于根据输入中的每个字母过滤数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！