Фильтр React Native Search не работает должным образом

Question

Я пытаюсь реализовать реагировать собственный фильтр поиска. У меня есть массив данных на родительском экране, и я применил поисковый фильтр к родительскому файлу и передал отфильтрованный массив данных в качестве реквизитов на дочерний экран. Но никакого фильтра не происходит. Я в замешательстве или не знаю, что я делаю неправильно. У меня есть следующие коды:

ParentScreen.js

import SearchInput, { createFilter } from 'react-native-search-filter';
...
const KEYS_TO_FILTERS = ['title']

export default class ProductScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            items: API,
            searchTerm: '',
        }
    }

    searchUpdated(term) {
        this.setState({ searchTerm: term })
    }

    render() {

        const filteredItems = this.state.items.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))

        let cardGridWithBodyProps = {
            navigation: this.props.navigation,
            api: filteredItems,
            gridNumber: 2,
        }

        return (
            <Container>
                <ScrollView showsVerticalScrollIndicator={false}>
                    <View>
                        <Header>
                            <SearchInput 
                            onChangeText={(term) => { this.searchUpdated(term) }}
                            placeholder="Search"
                            />
                        </Header>
                    </View>
                    <View>
                        <CardGridWithBody {...cardGridWithBodyProps} />
                    </View>
                </ScrollView>
            </Container>
        )
    }
}

ChildScreen.js

export default class CardGridWithBody extends Component {
    constructor(props) {
        super(props)
        this.state = {
            items: this.props.api
        }
    }

    renderGrid(gridArray) {
        return gridArray.map((row, rowIndex) => (
            <Row key={rowIndex}>
                {row.map((col, colIndex) => (this.renderColumn(col, rowIndex,colIndex)))}
            </Row>
        ));
    }

    renderColumn(colItem, rowIndex, colIndex) {
        return (
            <Col  key={colIndex}>
                <Text>{colItem.title}</Text>       
            </Col>
        )
    }

    renderContent() {
        let gridArray = this.state.items
        return this.renderGrid(gridArray)
    }

    render() {
        return (
            this.renderContent()
        )
    }
}

Answer 1

Вместо сохранения данных в состоянии, доступ к ним напрямую из реквизита. Если вы сохраните его в состоянии, вам нужно будет обновить его вручную, используя методы жизненного цикла, такие как shouldComponentUpdate или getDerivedStateFromProps

renderContent = () => {
  let gridArray = this.props.api;
  return this.renderGrid(gridArray);
}

Answer 2

В родительском экране конвертировать

 searchUpdated(term) {
   this.setState({ searchTerm: term })
 }

до

 searchUpdated = term => {
      this.setState({ searchTerm: term })
    }

и в вашем дочернем компоненте вы можете сделать

static getDerivedStateFromProps(nextProps, prevState) {
      if (nextProps.api !== prevState.api) {
        return { api: nextProps.api };
      }
      return null;
    }

    componentDidUpdate(prevProps, prevState) {
      if (
        this.state.items !==
        prevState.items
      ) {
        this.setState({ items: api });
      }
    }