Question

我正在尝试使搜索栏起作用，但是当我在其中输入文字时，它不会过滤任何内容。有人可以看一下代码，然后告诉我可能是什么问题吗？目录中显示的所有项目都是从我创建的JSON文件夹中提取的数据。由于篇幅原因，我取出了所有导入的元素/库。

const items = [
  { name: "Homer Simpson", screen: "HomerSimpson" },
  { name: "Marge Simpson", screen: "MargeSimpson" },
  { name: "Bart Simpson", screen: "BartSimpson" },
  { name: "Lisa Simpson", screen: "LisaSimpson" },
  { name: "Maggie Simpson", screen: "MaggieSimpson" }
];

class CharacterDirectory extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    this.setState({
      data: items
    });
  }
  updateSearch(search) {
    var data = items.filter(item =>
      item.name.toLowerCase().includes(search.toLowerCase())
    );
    this.setState({ data });
  }
  render() {
    const { navigation } = this.props;
    const type = navigation.getParam("itemID", "NO-ID");
    const typeData = characters[type];
    return (
      <View style={styles.container}>
        <ImageBackground
          source={{
            uri:
              "https://backgrounddownload.com/wp-content/uploads/2018/09/simpsons-clouds-background-5.jpg"
          }}
          style={{
            width: "100%",
            height: "100%",
            alignContent: "center",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <SearchHeader
            updateSearch={search => {
              this.updateSearch(search);
            }}
          />
          {characters.map((data, index) => (
            <Button
              text={data.name}
              key={data.name}
              title={`${data.name}`}
              onPress={() => {
                this.props.navigation.navigate("CharacterProfiles", {
                  item: data
                });
              }}
            />
          ))}
        </ImageBackground>
      </View>
    );
  }
}
export default withNavigation(CharacterDirectory);

Answer 1

更改此代码

{characters.map((data, index) => (
            <Button
              text={data.name}
              key={data.name}
              title={`${data.name}`}
              onPress={() => {
                this.props.navigation.navigate("CharacterProfiles", {
                  item: data
                });
              }}
            />
          ))}

此代码

{this.state.data.map((data, index) => (
            <Button
              text={data.name}
              key={data.name}
              title={`${data.name}`}
              onPress={() => {
                this.props.navigation.navigate("CharacterProfiles", {
                  item: data
                });
              }}
            />
          ))}

输入文字时不触发搜索栏

1 个答案: