#reactjs #dictionary #input #filter #searchbar
Вопрос:
Я занимаюсь этим уже несколько часов, я смотрел несколько видеороликов о людях, которые делают очень похожие приложения, которые принимают вводимые пользователем данные и фильтруют элементы из базы данных. Я ни за что на свете не могу понять, как отфильтровать и обновить состояние до ввода пользователя и отобразить его, все за один раз.
import './SearchBar.css'; let SearchBar = props =gt; { //capture searchBar userInput const userInput = event =gt; { props.onChange(event.target.value) } //create searchBar as input field return ( lt;input type="text" placeholder="Search by name" onChange={userInput} /gt; ) } export default SearchBar; и
import React, { useEffect } from "react"; import PrintFullName from "./PrintItems/PrintFullName"; import PrintPicture from "./PrintItems/PrintPicture"; import PrintGradeAverage from "./PrintItems/PrintGradeAverage"; import PrintVarious from "./PrintItems/PrintVarious"; let PrintStudentInfo = props =gt; { //fetch database to create new array of students to display useEffect(() =gt; { function fetchStudentInfo() { fetch('https://api.hatchways.io/assessment/students') .then(response =gt; { return response.json(); }) .then(data =gt; { const transformedStudentData = data.students.map(studentData =gt; { return { imgURL: studentData.pic, fullName: `${studentData.firstName} ${studentData.lastName}`, email: studentData.email, company: studentData.company, skill: studentData.skill, grades: studentData.grades } }); props.onChange(transformedStudentData); }); } fetchStudentInfo(); }, []); //if student length is empty, display 3 dots to indicate the request has not yet been recieved if (!props.students.length) return (lt;h2gt;...lt;/h2gt;); //setStudents to a new array of filteredStudents const textFilter = () =gt; { props.students.filter(filteredStudents =gt; { return filteredStudents.fullName.includes(props.enteredText); }) }; //return array of students return ( lt;ulgt; {props.students.filter(textFilter).map(student =gt; { return ( lt;div className="item"gt; lt;PrintPicture imgURL={student.imgURL} /gt; lt;div className="text"gt; lt;PrintFullName fullName={student.fullName} className="name" /gt; lt;PrintVarious entry='E-mail' entryData={student.email} className="various" /gt; lt;PrintVarious entry='Company'entryData={student.company} className="various" /gt; lt;PrintVarious entry='Skill'entryData={student.skill} className="various" /gt; lt;PrintGradeAverage grades={student.grades} className="various" /gt; lt;/divgt; lt;hr /gt; lt;/divgt; ); } )}lt;/ulgt; ); } export default PrintStudentInfo; в частности, заставить этот фрагмент работать в качестве фильтра.
//setStudents to a new array of filteredStudents const textFilter = () =gt; { props.students.filter(filteredStudents =gt; { return filteredStudents.fullName.includes(props.enteredText); }) }; //return array of students return ( lt;ulgt; {props.students.filter(textFilter).map(student =gt; { return ( lt;div className="item"gt; lt;PrintPicture imgURL={student.imgURL} /gt; lt;div className="text"gt; lt;PrintFullName fullName={student.fullName} className="name" /gt; lt;PrintVarious entry='E-mail' entryData={student.email} className="various" /gt; lt;PrintVarious entry='Company'entryData={student.company} className="various" /gt; lt;PrintVarious entry='Skill'entryData={student.skill} className="various" /gt; lt;PrintGradeAverage grades={student.grades} className="various" /gt; lt;/divgt; lt;hr /gt; lt;/divgt; ); } )}lt;/ulgt; ); мои два состояния были перенесены в приложение (), и строка поиска отображается первой.
const [students, setStudents] = useState([]); const [enteredText, setEnteredText] = useState(''); Пожалуйста, помогите…