Reactjs React/Apollo fetchMore重新加载整个页面

我在尝试对我的webapp上的数据列表执行分页/获取更多按钮时遇到问题。我的问题是，当我点击fetchMore按钮时，整个页面都在重新加载，这是一种老式的风格，而我只希望重新加载更新后的“计算”列表，而不希望重新加载查询的其余部分（用户…）

有没有办法限制fetchMore之后更新的内容？我不希望整个DOM被重新命名

我还试图发送一个特定的查询，只引用我需要的内容，但也出现了一个错误

以下是代码所需的部分：

export const query = gql`
    query UserAndData($limit: Int!) {
        user {
            _id,
            nom,
            prenom,
            email,
            isAdmin
        }
        adminCalculations {
            _id,
            lastUpdated,
            comments
        }
        adminUsers {
            _id,
            lastConnect,
            nom,
            prenom,
            email,
            societe
        }
        calculs(limit: $limit) {
            _id,
            userId,
            date,
            duration,
            user {
                email
            }
        }
        count
    }
`

class Admin extends Component {

    state = {
        limit : 100,
    }

    render() {
        return(
            <Query query={query} variables={{ limit : this.state.limit}} fetchPolicy="cache-and-network">
                {({ loading, error, data, fetchMore }) => {
                    if (loading) return <p>Loading...</p>;
                    if (error) return <p>Error</p>;
                    console.log(data);
                    if (!data || (!data.user || !data.user.isAdmin)){
                        return (<Redirect to="/" />)
                    }
                    return(
                        <div className="admin">
  (lot of coding and rendering users list, calculs lists, etc...)

   <div className="bouton" onClick={() => {
       fetchMore({                               
          variables : { limit : this.state.limit + 100 },
          updateQuery : (prev, { fetchMoreResult }) => {
          if (!fetchMoreResult) return prev;
          return Object.assign({}, prev, { calculs : 
          fetchMoreResult.calculs });
      }

                                                })
                                                this.setState({ limit : this.state.limit + 100 })
                                            }
                                                }>Charger plus de calculs</div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }}
                </Query>
            )
        }
    }

export default Admin;

export const query=gql`
查询UserAndData（$limit:Int！）{
使用者{
_身份证，
笔名，
普雷诺姆，
电子邮件，
伊萨明
}
行政计算{
_身份证，
最近更新，
评论
}
管理员用户{
_身份证，
lastConnect，
笔名，
普雷诺姆，
电子邮件，
兴业银行
}
计算（限额：$limit）{
_身份证，
用户ID，
日期，
期间
使用者{
电子邮件
}
}
计数
}
`
类管理扩展组件{
状态={
限额：100，
}
render（）{
返回(
{（{加载，错误，数据，fetchMore}）=>{
如果（加载）返回加载…
；
if（error）返回error
；
控制台日志（数据）；
如果（！data | |（！data.user | |！data.user.isAdmin））{
返回（）
}
返回(
（大量编码和呈现用户列表、计算列表等）
{
获取更多（{
变量：{limit:this.state.limit+100}，
updateQuery：（prev，{fetchMoreResult}）=>{
如果（！fetchMoreResult）返回prev；
返回Object.assign（{}，prev，{calculs:
fetchmoresult.calculs}）；
}
})
this.setState（{limit:this.state.limit+100}）
}
}>充电器加计算器
)
}}
)
}
}
导出默认管理员；

事实上，我发现问题与我的查询有关。当我查询组件所需的全部数据时

if(loading)

语句，则每次引用时都会再次加载整个页面，因此整个页面都在呈现

<p>Loading...</p>

正在加载

即使加载时间很短->也会导致我的整个页面“刷新”

---

为了解决这个问题，我创建了一个子组件，它还包括一个Apollo查询组件，但只包括我想要重新提取的查询。包含user、adminCalculations和adminUsers查询的父组件不会被无意义地刷新，只有所需的子查询会重新调用和重新渲染

事实上，我发现问题与我的查询有关。当我查询组件所需的全部数据时

if(loading)

语句，则每次引用时都会再次加载整个页面，因此整个页面都在呈现

<p>Loading...</p>

正在加载

即使加载时间很短->也会导致我的整个页面“刷新”

---

为了解决这个问题，我创建了一个子组件，它还包括一个Apollo查询组件，但只包括我想要重新提取的查询。包含user、adminCalculations和adminUsers查询的父组件不会被无意义地刷新，只有所需的子查询会重新调用和重新渲染

我不确定这是否是个问题，但肯定是个问题。不要在渲染方法内设置状态。React之所以称为React，是因为它会对道具进行“反应”，并且状态会随新渲染而更改。您的州位于示例的根。在这种情况下，render（）方法中的所有内容都将在状态更改时重新渲染。状态设置为onClick操作。除了与重新蚀刻发生冲突外，您看不出它有什么问题吗？出于好奇，我尝试了@mrbinky3000 idea并删除了设置状态，然后重试，但没有更改任何内容。由于它是onclick操作的一部分，我看不出它是如何产生问题的。包含

if（！data | |（！data.user | | |！data.user.isAdmin））的if语句（

重定向到“\”。当Apollo开始获取更多数据时，在那里抛出控制台日志以检查data.user和data.user.isAdmin是否存在。我不确定这是否是问题所在，但肯定有问题。不要在呈现方法中设置状态。React称为React，因为它“React”使用新的渲染来支持和状态更改。您的状态位于示例的根位置。在这一高度上，渲染中的所有内容（）方法将在状态更改时重新渲染。该状态是在onClick操作上设置的。除非它与重新蚀刻发生冲突，否则不知道它在哪里有问题？出于好奇，我尝试了@mrbinky3000 idea并删除了setState，然后重试，但没有更改任何内容。由于它是onClick操作的一部分，我看不出它是如何产生问题的如果（！data | | |（！data.user | |！data.user.isAdmin））{重定向到“\”则具有

的f语句。当Apollo开始获取更多数据时，在那里抛出控制台日志以检查data.user和data.user.isAdmin是否存在。遇到同样的问题，感谢您分享您的解决方案是的。我遇到的确切问题是，
加载
状态I