React Native After Flatlist Конструктор обновления элементов не работает

Question

Я пытаюсь сделать поисковый фильтр с плоским списком.Это работает, но моя проблема в том, что после обновления плоского списка конструктор элементов больше не вызывается, и мне нужно установить состояние в конструкторе.Каков наилучший способ справиться с этим?

flatlist

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

Обработка поискового фильтра

_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

Попробуйте использовать componentWillReceiveProps, а также расширить дочерний компонент с реакции Component вместо PureComponent.

Answer 2

Спасибо за ваши ответы, но я уже нашел способ исправить проблему с «изображением по умолчанию».

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

}

Answer 3

Добавить в SearchItem:

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