Reactjs React：尝试将数据从GraphQl查询存储到错误的状态解析

我遇到了与此问题类似的问题-->。这涉及到我试图解决的同一个问题，即如何在收到查询数据后将其存储在状态中，而不是立即呈现它

我尝试了这个问题的答案，但我得到了这个错误：

×错误：超出最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

一段时间以来，我一直试图解决在状态中存储查询数据的问题，但遇到了一堵我似乎无法逾越的墙

根据上面链接中给出的答案，我将我的代码结构如下，解决了上面提到的错误：

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

类ClientList扩展组件{
clientsToRender=[]；
建造师（道具）{
超级（道具）；
此.state={
clientFeed:[]，
};
};
getClientFeed（数据）{
这是我的国家({
clientFeed：数据，
})
}
render（）{
const CLIENT_FEED_QUERY=gql`
{
客户反馈{
身份证件
名字
姓氏
电子邮件
}
}
`
返回(
{（{加载，错误，数据}）=>{
如果（正在加载）返回
加载。。。
如果（错误）返回似乎存在服务器问题，请稍后重试或联系帮助热线
//-----短期解决方案是将其存储在有效但不是我所需要的状态之外
this.clientsToRender=data.clientfeed
返回(
{this.clientsToRender.map（client=>）}
{console.log（“state:，this.state.clientFeed）}
)
}}
)
}
}
导出默认客户端列表

---

这个问题我已经纠缠太久了。我真的希望有人能为我提供实现这一点的正确方法，而不是将其存储在状态之外的短期解决方案。

您正在将

getClientFeed

的结果传递给Query

onComplete

属性，从而在每次渲染时都会执行它。您可能希望传递对函数的引用。试着去掉括号

onCompleted={this.getClientFeed}

嗨，这确实有效，我可以在

getClientFeed

中记录

数据

并在日志中查看正确的数据，但是当我想设置状态时，我现在得到这个错误=>

×未处理的拒绝（TypeError）：无法读取未定义的属性“状态”，这让我很困惑？啊，是的，
getClientFeed
解除了对
this
变量的绑定，因此需要显式绑定它。一种方法是在构造函数中绑定它：
this.getClientFeed=this.getClientFeed.bind（this）
解释了一些替代方法我已经通过这样做使它工作-->
this.getClientFeed（e）}>
但是我将尝试按照你的建议去做，因为我认为它看起来更干净，用
this.getClientFeed=this.getClientFeed.bind（this）测试它并且工作得非常好谢谢！您正在将
getClientFeed
的结果传递给查询
onComplete
属性，从而在每次渲染时执行该查询。您可能希望传递对函数的引用。试着去掉括号
onCompleted={this.getClientFeed}
嗨，这确实有效，我可以在
getClientFeed
中记录
数据
并在日志中查看正确的数据，但是当我想设置状态时，我现在得到这个错误=>
×未处理的拒绝（TypeError）：无法读取未定义的属性“状态”，这让我很困惑？啊，是的，
getClientFeed
解除了对
this
变量的绑定，因此需要显式绑定它。一种方法是在构造函数中绑定它：
this.getClientFeed=this.getClientFeed.bind（this）
解释了一些替代方法我已经通过这样做使它工作-->
this.getClientFeed（e）}>
但是我将尝试按照你的建议去做，因为我认为它看起来更干净，用
this.getClientFeed=this.getClientFeed.bind（this）测试它并且工作得非常好谢谢！