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

如何解决我正在尝试在React中实现动态搜索

您好，我正在尝试在React中实现动态搜索，但是我无法呈现所需的内容。

请在以下位置找到代码 https://codesandbox.io/s/gracious-feather-1lqnm?file=/src/App.js

当我尝试滤除动态搜索结果时

初始画面 please click on the link to view the image 当我尝试搜索“伯特”时，我在日志中得到了正确的结果 please click on the link to view the image 但我无法渲染相同的图像，看起来我能够渲染所需数量的结果，但无法渲染所需的结果。 please click on the link to view the image

解决方法

您的代码中有几个问题：

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

1. 在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