Реагировать на родной плоский список потерянный фокус поиска - PullRequest
Новая
       14

Реагировать на родной плоский список потерянный фокус поиска

0 голосов
/ 16 апреля 2020

Я пытаюсь реализовать функцию поиска в реагирующем собственном плоском списке. По сути, вы используете текстовый ввод в ListHeaderComponent для поиска, и когда вы делаете это, я вызываю свой бэкэнд graphql через apollo, который выбирает некоторые данные и отображает их в плоском списке. Проблема в том, что всякий раз, когда обновляются данные плоского списка, заголовок перемонтируется, поэтому то, что вы искали, удаляется. Я искал на inte rnet, но не нашел никакого решения. Заранее спасибо! 

import React, { useState, useEffect } from 'react'
import { Text, View, FlatList } from 'react-native'
import { useLazyQuery } from '@apollo/react-hooks'
import { gql } from 'apollo-boost'
import BookCard from '../../components/BookCard'
import Loading from '../../components/Loading'
import Center from '../../components/Center'
import TextField from '../../components/TextField'
import CenterApolloErrorText from '../../components/CenterApolloErrorText'
import Styles from '../../util/Styles'

const searchQuery = gql`
   query SearchQuery($query: String!) {
       bookSearch(query: $query) {
           isbn
           title
           subTitle
           authors
           thumbnail
       }
   }
`

export default () => {
   const [query, setQuery] = useState('')
   const [callSearchQuery, { data, loading, error }] = useLazyQuery(searchQuery)
   const [books, setBooks] = useState([])

   useEffect(() => {
       if(data) setBooks(data.bookSearch)
   }, [data])

   const Header = () => (
       <>
           <Text style={{fontSize: 40}}>Search</Text>
           <TextField 
               value={query}
               onChangeText={query => {
                   setQuery(query)
                   callSearchQuery({ variables: { query } })
               }}
               placeholder='title, author etc'
           />
       </>
   )

   const Book = ({item: book}) => (
       <BookCard 
           isbn={book.isbn}
           thumbnail={book.thumbnail}
           title={book.title}
           authors={book.authors}
       />
   )

   return (
       <FlatList 
           data={books}
           style={Styles.pageContainer}
           extraData={query}
           keyExtractor={(item, index) => item.isbn + index}
           renderItem={Book}
           ListHeaderComponent={Header}
       />
   )
}
...