Javascript i'；我试图在react中实现动态搜索

大家好，我正在尝试在react中实现动态搜索，但无法呈现所需的内容

请在以下地址查找代码：

当我尝试筛选出动态搜索结果时

初始屏幕 当我尝试搜索“bert”时，我在日志中得到了正确的结果 但是我不能呈现相同的结果，看起来我能够呈现所需数量的结果，但不是期望的结果。

---

您的代码中有几个问题：

StudentContainer

。千万不要通过道具在构造函数中设置状态变量。您应该直接传递来自儿童的道具：

---

下面是演示：

这里有很多代码，很难从中分辨出来。你能把这个放到

codesandbox

上吗？@ShubhamVerma，我把我的代码上传到了codesandbox上。请检查修改后的链接。很好，请投票并将答案标记为接受。如果有人遇到同样的问题。这将使他们了解上下文。

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

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