如何在 React Native 中进行搜索？

Question

我正在尝试在我的 app.For 中实现一个字典，我正在获取一个包含字典数据的 api 响应。 api 响应将基于 user.If 给出的输入我输入字母 a 然后相应的结果将是 produced.But 进一步输入完整的单词，比如 adhaar 然后我期望的是在我的情况下只呈现那个 purtcular item.But 无论我在搜索字段中键入什么结果将是相同的，即使在完整的单词是 typed.Also 我没有得到我正在输入的单词的结果。 I'm following this doc 请帮我找出我做的 mistake.What 错误？请 help.Following 是我的代码

  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

任何帮助都是appreciated.Thank你！

Answer 1

这是由于范围问题。您有代码在异步中执行，代码在此之后根据异步结果执行。这对你不起作用。

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

A marker property for telling the list to re-render (since it implements PureComponent)

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

希望这足以让您修复代码。

如何在 React Native 中进行搜索？

How to do searching in react native?

javascript

reactjs

react-native

listitem

react-native-flatlist