Javascript 如何在react native中进行搜索？

我试图在我的应用程序中实现一个字典。为此，我获取一个api响应，其中包含字典的数据。 api响应将基于用户提供的输入。如果我键入字母

a

，则会生成相应的结果。但如果进一步键入完整单词，说

adhaar

然后我期望的是只呈现purtcular项。但是在我的情况下，无论我在搜索字段中键入什么，即使键入完整的单词，结果都是相同的。而且我没有得到我正在键入的单词的结果。 请帮我找出我的错误。我做错了什么？请帮我。下面是我的代码

  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>

构造函数（道具）{
超级（道具）；
此.state={
加载：false，
数据：[]
};
this.arrayholder=[]；
}
searchFilterFunction=文本=>{
this.setState（{text}）；
log（this.state.text）；
获取（'xxxxxx'{
方法：'POST'，
标题：{
“接受”：“应用程序/json”
},
正文：JSON.stringify({
s:文本，
加载：错误
})
}).then（（response）=>response.json（））
.然后（（响应数据）=>{
这是我的国家({
数据：responseData.data
})
this.arrayholder=responseData.data
})
.catch（错误=>{
this.setState（{error，loading:false}）；
});
const newData=this.arrayholder.filter（项=>{
const itemData=`${item.post_title}`；
const textData=文本；
返回itemData.indexOf（textData）>-1；
this.setState（{data:newData}）；
});
}
this.searchFilterFunction（{text}）}
/>
...
...
(
{item.post_title}
)}
keyExtractor={（项，索引）=>index.toString（）}
ItemSeparatorComponent={this.renderSeparator}
/>

这就是输出屏幕的显示方式

---

感谢您的帮助，谢谢

这是由于范围问题造成的。根据异步结果，在异步模式下执行代码，然后再执行代码。这对你没用

searchFilter函数中存在一些问题

创建

newData

时，setState会写入return语句之后的过滤器中。它永远不会被调用，因此您永远不会更新您的状态

你还，似乎不必要的，多次调用setState。我想你只需要打两次电话。一次是在数据已下载时，一次是在数据未能下载时

这是一个更新的

searchfilter函数

，它应该可以让您了解如何修复代码

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

• 我已经删除了开始时文本的设置状态，您需要吗 在此处设置它，因为它将强制重新渲染

• 在

  .then（（responseData）=>…）

  中，我已对其进行了更新，以便您可以直接对

  responseData.data

  执行筛选，然后将

  filteredData

  和

  文本

  保存到state

• 我删除了this.arrayholder的

  设置，我认为您并不真正需要它，除非您在其他地方使用它
  

在您的平面列表中，我将添加

extraData

prop

用于通知列表重新渲染的标记属性（自 实现PureComponent）

---

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

谢谢您的回复。我尝试了您的方法，但渲染不起作用。找不到任何搜索结果：（您是否将正确的搜索文本输入到

searchFilterFunction

？您是否尝试注销responseData以查看是否从服务器收到响应？如果是，是否收到响应，是否尝试注销FilterData以查看是否有匹配项？我尝试了

console.log。）（this.state.data）

在

render

中，但我得到了一个空数组。我还尝试了

console.log（itemData）

输出与之前相同，没有返回匹配的项。实际上，

Filteredata

不存在，它是

数据

？解决此问题的步骤非常简单。您需要知道是否将正确的搜索文本传递给

searchFilterFunction

。然后您需要检查响应的数据是否符合预期它将用于fetch调用。然后您需要筛选该响应，使其与搜索文本字符串匹配。如果您不打算检查这些，则我无法进一步帮助您。

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