Question

我正在尝试使用平面列表进行搜索过滤。它有效，但是我的问题是在更新列表后，不再调用项目的构造函数，而我需要在构造函数中设置状态。处理此问题的最佳方法是什么？

平面列表

<FlatList
            data={this.state.searchedArray}
            keyExtractor={this._keyExtractor}
            removeClippedSubviews={true}
            extraData={this.state}
            renderItem={this._renderItem} />

处理searchfilter

_handleChange(message) { 
     let text = message.toLowerCase();
     let searchedArray = [];

    console.log(searchedArray);
    if (text.length < 2) {
      return false;
    }
    // search trough json array
    searchedArray = this.state.data.filter(row => {
      if (row.symbol.toLowerCase().indexOf(text) !== -1 || row.name.toLowerCase().indexOf(text) !== -1 || row.id.toLowerCase().indexOf(text) !== -1) {
        return true;
      }
      return false;
    }).map((row) => {
      return row;
    }); 

    this.setState({
      searchedArray: searchedArray
    });

  }

子组件

export default class SearchItem extends PureComponent {

  constructor(props) {
    super(props);

  const item = this.props.item;
    this.state = {
      image: item.symbol
    }
  }

  render() { 
    const item = this.props.item; 
    
    return (
      
        <View style={globalStyles.row}>
          <View style={[globalStyles.cell, globalStyles.primaryCell]}>

            <Image
              source={{ uri: this.state.image}}
              style={styles.image}
              blurRadius={0}
              onError={(a) => {
                this.setState({ image: 'question'})
            }}
                         />
                         </View>
                         </View>
        
    )
  }

}

Answer 1

添加到SearchItem：

componentWillReceiveProps(newProps){
    if (this.state.image !== newProps.item.symbol) {
        this.setState({image: newProps.item.symbol})
    }
}

Answer 2

尝试使用componentWillReceiveProps以及从反应Component而不是PureComponent扩展子组件。

Answer 3

感谢您的回答，但是我已经找到了解决“默认图片”问题的方法。

export default class SearchItem extends PureComponent {

  constructor(props) {
    super(props);

  const item = this.props.item;
    this.state = {
      error: false
    }
  }

  render() { 
    const item = this.props.item; 
    let symbol = (this.state.error) ? 'question' : item.symbol;
    
    return (
      
        <View style={globalStyles.row}>
          <View style={[globalStyles.cell, globalStyles.primaryCell]}>

            <Image
              source={{ uri: symbol}}
              style={styles.image}
              blurRadius={0}
              onError={(a) => {
                this.setState({ error: true})
            }} 
            />
           </View>
         </View>
        
    )
  }

}

在Flatlist更新项目后构造器时无法响应本机

3 个答案: