如何在 Apollo Query Render Props 中调用 setState？答案

【问题标题】：How to call setState in Apollo Query Render Props?如何在 Apollo Query Render Props 中调用 setState？
【发布时间】：2019-01-25 16:08:50
【问题描述】：

我正在尝试结合 setState 和 Apollo Query 在顶级组件中创建错误。我实际上正在使用 React Context，但这得到了相同的观点。

setError = () => this.setState({ isError: true });

render() {
  return (
   this.state.isError ? <CustomError /> : (
   <Query>
     {({ loading, error, data }) => {

       // first error check
       if (error) { 
         this.setError();
         // this all works if I return <div /> right here, but that's kinda bad
       }
       // I also want to set an error in a child component
       <VeryComplicatedComponentThatCantBeInThisFile setError={this.setError}>
     })
   </Query>
   )
  );
}

有人知道如何最好地做到这一点吗？

【问题讨论】：

你能解释一下你想要得到的方法吗？不建议在 render 函数中调用 set state，可以直接调用 return CustomError 组件（但我猜它与父组件有关）
@galvan - 是的，这就是简单的解决方案。本质上，我希望能够在子组件的任何地方设置错误。我实际上是在使用 React 的 context api 来避免将它作为道具传递。似乎查询真的应该有某种 onFetchComplete 道具/允许异步功能。
redux 呢？为什么不在 redux 中设置一个状态，并且每个需要注意是否发生错误的孩子都可以监听应用程序状态。
@galvan - 原谅我 - 我并没有真正使用过 Redux（尝试使用 React Context）。尽管需要在渲染方法中设置状态/更改存储值，但我不会遇到同样的问题吗？
不，使用 redux，您可以观察应用程序状态的变化，当状态发生变化时，组件将获得具有新状态的新道具。看看 react-redux - 使用 'connect' 高阶组件

标签： reactjs graphql apollo react-apollo

【解决方案1】：

我在使用渲染道具缓存表单数据时遇到了类似的问题。幸运的是，它提供了 onError 和 onComplete 回调，以便您可以在那里设置状态。请注意，这些回调在使用缓存时不会被触发。

class MyComponent extends React.Component {
  setError = () => this.setState({ isError: true });
  handleQueryError = error => {
    this.setError();
  };
  handleQueryComplete = data => {
    this.setState({formData: data});    
  };
  render() {
    return (<Query 
      fetchPolicy="network-only"
      onError={this.handleQueryError}
      onComplete={this.handleQueryComplete}>
      {({ loading, error, data }) => {
        return <VeryComplicatedComponentThatCantBeInThisFile isError={this.state.isError}>
      }}
    </Query>);
  }
}

【讨论】：