React：尝试存储来自GraphQl查询的数据以解决状态错误

问题描述

我遇到了与此问题类似的问题-> How to store the data in React state after Querying it from GraphQL?。其中涵盖了我要解决的同一问题，即如何在接收到查询数据后立即将其存储在状态中，而不是立即呈现它。

我尝试过为该问题提供答案，但出现此错误： × Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentwillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我一直在尝试解决将查询数据存储在状态A中的问题，现在遇到了我似乎无法克服的障碍。

利用上面链接中给出的答案，我已经像上面这样构造了我的代码，从而解决了上述错误：

class ClientList extends Component {
    clientsToRender = [];
    constructor(props) {
        super(props);
        this.state = {
         clientFeed:[],};
      };

      getClientFeed(data){
          this.setState({
              clientFeed: data,})
      }
    render() {
        const CLIENT_Feed_QUERY = gql`
     {
        clientFeed {
          id
          firstname
          lastname
          email
     }
    }
   `
        return (
            <Query query={CLIENT_Feed_QUERY} onCompleted={this.getClientFeed()}>
                {({ loading,error,data }) => {
                    if (loading) return <div class="spinner-grow text-dark spinner-width m-5" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    if (error) return <div>There seems to be a server issue,try again later or contact helpdesk</div>

// ---- short term solution was to store it outside state which worked but is not what I needed
                    this.clientsToRender = data.clientFeed 

                    return (
                        <React.Fragment>
                            <div className="container">

                                <div className="row row-cols-3">

                                    {this.clientsToRender.map(client => <Client key={client.id} client={client} />)}

                                </div>
                            </div>

                                {console.log("state:",this.state.clientFeed)}

                        </React.Fragment>
                    )
                }}
            </Query>
        )
    }
}

export default ClientList

这个问题困扰了我太久了。我真的希望有人能为我提供实现此目标的正确方法，而不是用短期解决方案将其存储在外部状态。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）