Как сделать поиск в реагировать на родной? - PullRequest
Новая
       25

Как сделать поиск в реагировать на родной?

0 голосов
/ 26 декабря 2018

Я пытаюсь реализовать словарь в своем приложении. Для этого я получаю ответ API, который содержит данные для словаря.Ответ API будет основан на вводимых пользователем данных. Если я наберу букву a, то будет получен соответствующий результат. Но при дальнейшем вводе полного слова, скажем adhaar, я ожидаю, что будет отображаться только этоpurtcular item. Но в моем случае, что бы я ни напечатал в поле поиска, результат будет таким же, даже после того, как введено полное слово. Также я не получаю результат слова, которое я печатаю. Я слежу за этим документом Пожалуйста, помогите мне выяснить мою ошибку. Что не так я делаю? Пожалуйста, помогите. Следите за моим кодом 

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data:[]
    };
    this.arrayholder = [];
  }
searchFilterFunction = text =>{
  this.setState({ text });
  console.log(this.state.text);
    fetch('xxxxxx', {
         method:'POST',
         headers: {
             'Accept': 'application/json'
         },
         body:JSON.stringify({
           s:text,
           loading:false
         })
     }).then((response) => response.json())
     .then((responseData) => {

          this.setState({
              data:responseData.data
          })

          this.arrayholder = responseData.data

     })
     .catch(error => {
     this.setState({ error, loading: false });
   });
   const newData = this.arrayholder.filter(item => {
    const itemData = `${item.post_title}`;
     const textData = text;
     return itemData.indexOf(textData) > -1;
     this.setState({ data: newData });
  });

   }
<Container>
     <Header>
         <Item>
           <Input placeholder="Search"
           onChangeText={text => this.searchFilterFunction({text})}
           />
         </Item>
       </Header>
    ...
     ...
   <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
       <FlatList
       data={this.state.data}
       renderItem={({ item }) => (
       <Text>{item.post_title}</Text>
       )}
       keyExtractor={(item, index) => index.toString()}
       ItemSeparatorComponent={this.renderSeparator}
       />
       </List>
  <Container>

Вот как выводится экранбудет https://i.stack.imgur.com/gXhTb.png

Любая помощь приветствуется. Спасибо!

1 Ответ

0 голосов
/ 26 декабря 2018

Это связано с проблемой объема.У вас есть код, выполняющийся в асинхронном режиме, и код, выполняемый после этого в зависимости от асинхронного результата.Это не сработает для вас.

В функции searchFilter есть несколько проблем.

Когда вы создаете newData, setState записывается в фильтр после оператора return.Он никогда не будет вызван, поэтому вы никогда не обновляете свое состояние.

Вы также, что кажется ненужным, вызываете setState несколько раз.Я думаю, вам нужно позвонить только дважды.Один раз, когда данные были загружены, и один раз, когда данные не удается загрузить.

Вот обновленный searchFilterFunction, это должно дать вам некоторые идеи о том, как вы могли бы исправить свой код. 

searchFilterFunction = text =>{
  console.log(text);
    fetch(
      ...
    )
    .then((response) => response.json())
    .then((responseData) => {

      const filteredData = responseData.data.filter(item => {
        const itemData = `${item.post_title}`;
        const textData = text;
        return itemData.indexOf(textData) > -1;
      });

      this.setState({
          data: filteredData, 
          text
      });
    })
     .catch(error => {
     this.setState({ error, loading: false, text });
   });
}

  • Я удалил setState для текстав начале вам нужно установить его здесь, так как это вызовет повторную визуализацию.

  • В .then((responseData) => ... ) я обновил его, чтобы вы сразу выполнили фильтр наresponseData.data, затем сохраните filteredData и text в состояние.

  • Я удалил настройку this.arrayholder Я не думаю, что вам это действительно нужно, если только выИспользуем это в другом месте.

В вашем FlatList я бы добавил extraData prop

Свойство маркера, чтобы сообщить списку для повторного рендеринга (так как он реализует PureComponent) 

<FlatList
  ...
  extraData={this.state}
  ...
>

Надеюсь, этого будет достаточно для исправления вашего кода.

...