在Apollo客户端中进行补充查询



,所以我正在尝试构建一个小型搜索应用程序。我遇到的问题是,当文本输入状态更改时,我无法删除查询。这是代码

getInitialState: function(){
 return {
  searchParams: '' "
 }
},
render: function(){
 return (
   <View style={styles.container}>
     <SearchBar goSearch={this.goSearch}/>
     <SearchResults searchParams={this.state.searchParams} />
   </View>
  )
 },
 goSearch: function(searchParams){
   this.setState({searchParams: searchParams});
  }

因此,我有一个具有搜索栏组件的父组件,该组件是用户输入搜索查询的搜索栏,而searchResults组件呈现结果。每当搜索栏组件中的文本更改时,就可以看到搜索功能会更改状态。现在用于搜索搜索组件..

componentWillReceiveProps(nextProps){
if(this.props.searchParams!=nextProps.searchParams){
  console.log("props changed " + nextProps.searchParams)
  this.props.data.refetch();
  console.log(this.props.data.refetch)
}

},

render: function(){
 return ( 
  <View>
   {this.renderPosts()}
  </View>
 )
},
module.exports = graphql(fetchFilterPosts, {
 options: (props) => {
 return {
   variables: {searchParams:props.searchParams}
  }
}
})(SearchResults);

我在这里试图做的是,当父组件的状态更改时,它将以prop的形式传递在searchResult组件中,并且它作为graphql查询中的变量传递。现在的问题是,当道具发生变化时,我无法撤离。我已经设置了componentWillReceiveProps来检查道具是否更改并挖掘数据,但似乎不起作用。我已经阅读了一些有关订阅和更新的文章,但是我不确定这是否是我正在寻找的解决方案。需要绝望的帮助。预先感谢

也许喜欢这个

const getRemoteData=async ()=>(
  const res=await this.props.data.refetch();
  console.log(res)
)
getRemoteData();

相关内容

  • 没有找到相关文章

最新更新