Question

我有一个通过Expo构建的React Native应用，我想添加一个搜索功能以使用React Native中的搜索栏搜索FlatList。下面的搜索栏来自React Native Paper。

这是我的代码（App.js）：

constructor(props) {
    super(props);
    this.state = {
      dataSource: []
    }
  }

  state = {
    firstQuery: '',
  };

  componentDidMount() {
    const url = '// My URL'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.product
      })
    })
    .catch((error) => {
      console.log(error)
    })
  }

  state = {
    search: '',
  };

  updateSearch = search => {
    this.setState({ search });
  };

  SearchFilterFunction(text) {
    const newData = this.dataSource.filter(function(item) {
      const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      dataSource: newData,
      text: text,
    });
  }

render() {
    const { search } = this.state;
    const { firstQuery } = this.state;
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => {text => this.SearchFilterFunction(text)}}
        value={firstQuery} />

        <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem} /> 

    );
  }
}

我是否需要设置更多default state？是否需要isLoading或error: null？我在做什么错了？

更新现在是我的App.js：

constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      text: '',
      dataSource: []
    }; 
    this.arrayholder = [];
  }

  state = {
    firstQuery: '',
  };

  componentDidMount() {
    const url = '// My URL'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson.product
      }, {
        function() {
          this.arrayholder = responseJson;
        }
      }
      )
    })
    .catch((error) => {
      console.log(error)
    })
  }

  state = {
    search: '',
  };

  updateSearch = search => {
    this.setState({ search });
  };

  SearchFilterFunction(text) {
    const newData = this.dataSource.filter(function(item) {
      const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      dataSource: newData,
      text: text,
    });
  }

  renderItem = ({item}) => {
    return (
       // Code
    );
  }

  render() {
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => {text => this.SearchFilterFunction(text)}}
        value={this.state.text} />
    );
  }

这给了我一个'不变违反：作为回调传递的无效参数。预期的功能。而是收到：[object Object]'

Answer 1

您需要告诉flatlist，如果ABC状态变量中发生某些更改，请在源中查找数据更改并重新呈现。没有这个，它将不会使用新的值。

因此，要告诉您需要传递一个道具extraData，

<FlatList
    extraData={this.state.dataSource}
    data={this.state.dataSource}
    renderItem={this.renderItem} />

如果dataSource中的任何内容发生变化，flatlist将重新呈现其内容

Answer 2

搜索时，您需要一把钥匙才能正确操作。例如，如果您按地址搜索，

     <Searchbar
        placeholder="Search"
        onChangeText={{text => this.SearchFilterFunction(text)}}
        value={this.state.text} />

        <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
        keyExtractor={item => item.address}
        />

如何通过Search Bar React Native搜索FlatList？

2 个答案: