如何解决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 举报,一经查实,本站将立刻删除。