当 Apollo 查询“加载”时不呈现 - React

Question

我有一个 react-redux 应用程序，它使用 Apollo 客户端对我的 api GraphQL 进行查询。

我有一个 GridContainer，它使用 export default connect(mapStateToProps, mapDispatchToProps)(GridContainerWithData); 进行查询调用，其中 GridContainerWithData 是一个 const，它使用 graphql(gql `...)

这会在我的 props 中返回 data，其中包含：查询响应、是否有错误以及加载状态（true 或 false）。

现在，我正在使用 if(loading) {} 自己管理加载。

这里的问题是我的组件在它处于加载状态时呈现，然后在查询完成加载时再次呈现。如果我不使用if(loading) {}，我会收到一条错误消息，提示我需要在查询处于加载状态时返回一些内容。

有没有办法告诉组件在查询加载时不渲染？

我尝试过使用

shouldComponentUpdate (nextProps) {
    if (this.props.data.loading !== nextProps.data.loading) {
      console.log(‘i will rerender’, nextProps.data.loading);
      return true;
    }else {
      return false;
    }
}

但没有运气。

有没有办法告诉组件在查询加载时不渲染？

编辑：

如果它可以帮助任何人，这就是我的 GridContainer。

class ActionsToDoGridContainer extends Component {

 render () {
   const {error} = this.props.data;

   if (error) {
     return (
       <div className='ComponentDistance'>
         An unexpected error happened :
         {error}
       </div>);
    } else {
     return (
        <div className='ComponentDistance'>
          <ActionsToDoGrid {...this.props}/>
         ActionsToDoButtons {...this.props}/>
        </div>
     );
    }
  }
}

Answer 1

编辑：问题的发布者用这段代码解决了他自己的问题：

shouldComponentUpdate(nextProps) { 
  if (nextProps.data.loading === false) { 
    return true;
  } else {
    return false;
  }
}

我认为您对shouldComponentUpdate 的思考方向是正确的，但不是检查加载状态是否不同，而是检查您的数据是否不同。

shouldComponentUpdate (nextProps) {
    const thisData = this.props.data.queryDataResponse;
    const nextData = nextProps.data.queryDataResponse;
    if (!someLibrary.deepEquals(thisData, nextData)) {
      return true;
    }else {
      return false;
    }
}

如果数据发生变化，您的函数将返回 true 并更新。你可能会遇到一些边缘情况，所以当事情似乎中断时不要忘记这个功能