我正在尝试在反应中实现动态搜索

Question

Hi all I'm trying to implement dynamic search in react, but I'm not able to render the desired content.

please find the code at https://codesandbox.io/s/gracious-feather-1lqnm?file=/src/App.js

when i try to filter out dynamic search results

initial screen please click on the link to view the image when I try to search for "bert" i got the correct results in logs please click on the link to view the image but I'm not able to render the same, looks like I'm able to render the required number of results, but not the desired ones. please click on the link to view the image

Answer 1

There are couple of issues in your code:

1. StudentContainer . You should never set state variable in constructor via props. You should directly pass props as coming from children:

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. In StudentCard You again set state value via props . But it will only set first time when component is mounted. It will not going to set again. That is the reason your component is not updating. Do this (add condition according to yours requriment. This ensure component re-render again)

 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
      });
    }
  }

Here is the demo: https://codesandbox.io/s/xenodochial-hofstadter-0h0yd?file=/src/Components/StudentContainer.js