Question

所以我正在尝试构建一个小型搜索应用。我遇到的问题是，当文本输入的状态发生变化时，我无法重新获取查询。这是代码

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

所以我有这个父组件，其searchBar组件是用户输入搜索查询的搜索栏，而searchResults组件是呈现结果的组件。 Go Search功能，因为只要文本在searchBar组件中发生更改，您就可以看到更改状态。现在为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以检查道具是否更改并重新获取数据，但它似乎无法正常工作。我已经阅读了一些有关订阅和updateQueries的文章，但我不确定这是否是我正在寻找的解决方案。需要绝望的帮助。提前致谢

Answer 1

也许就像这样

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

getRemoteData();

在apollo客户端中重新获取查询

1 个答案: