Блог

Привет всем, я пытаюсь реализовать динамический поиск в react, но я не могу отобразить желаемый контент.

пожалуйста, найдите код по адресу https://codesandbox.io/s/gracious-feather-1lqnm?file=/src/App.js

когда я пытаюсь отфильтровать результаты динамического поиска

начальный экран, пожалуйста, нажмите на ссылку, чтобы просмотреть изображение когда я пытаюсь выполнить поиск «bert», я получил правильные результаты в журналах, пожалуйста, нажмите на ссылку, чтобы просмотреть изображение, но я не могу отобразить то же самое, похоже, я могу отобразить необходимое количество результатов, ноне нужные. пожалуйста, нажмите на ссылку, чтобы просмотреть изображение

В вашем коде есть несколько проблем:

1. StudentContainer . Вы никогда не должны устанавливать переменную состояния в конструкторе через props. Вы должны напрямую передавать реквизиты как исходящие от дочерних элементов:

 
class StudentContainer extends Component {
  render() {
    return (
      <div>
        {this.props.students.length
          ? this.props.students.map(
              (
                { firstName, lastName, email, company, skill, grades, pic },
                idx
              ) => (
                <ListItem xs={12} sm={6} md={3}>
                  <StudentCard
                    key={idx   1}
                    firstName={firstName}
                    lastName={lastName}
                    email={email}
                    company={company}
                    skill={skill}
                    grades={grades}
                    pic={pic}
                  />
                </ListItem>
              )
            )
          : "no data"}
      </div>
    );
  }
}

  

2. StudentCard Вы снова устанавливаете значение состояния через props. Но он будет установлен только в первый раз, когда компонент смонтирован. Он не будет установлен снова. Именно по этой причине ваш компонент не обновляется. Сделайте это (добавьте условие в соответствии с вашим требованием. Это гарантирует повторный рендеринг компонента)

  componentDidUpdate(prevProps, props) {
    if (
      prevProps.firstName !== props.firstName ||
      prevProps.email !== props.email
    ) {
      this.setState({
        firstName: this.props.firstName,
        lastName: this.props.lastName,
        email: this.props.email,
        company: this.props.company,
        skill: this.props.skill,
        grades: this.props.grades,
        pic: this.props.pic
      });
    }
  }
  

Вот демонстрация: https://codesandbox.io/s/xenodochial-hofstadter-0h0yd?file=/src/Components/StudentContainer.js