Question

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

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

这会在我的道具中返回数据，其中包含：查询响应，如果有错误和加载状态（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

编辑：问题的海报解决了他自己的问题：

DELETE FROM CONTAINER
WHERE CodContainer NOT IN (SELECT CodContainer FROM animal
GROUP BY CodContainer);

我认为您正在使用shouldComponentUpdate(nextProps) { if (nextProps.data.loading === false) { return true; } else { return false; } }思考正确的方向，但不是检查加载状态是否不同，请检查您的数据是否不同。

shouldComponentUpdate

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

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

1 个答案: