盖茨比Graphql跳过

Question

我正在尝试通过增加state.count的按钮从graphql中翻阅Gatsby的react组件中的数据。

当我单击按钮时，state.count会增加，但不会传递给查询。

有什么想法我做错了吗？

pageUp=() => {
this.setState({count: this.state.count +2});
let skip=this.state.count
}

render() {
return (
  <StaticQuery
    query={graphql`
      query ListingPageQuery ($skip:Int){
        allMarkdownRemark(
          limit:2
          skip: $skip
          ) 
          {
          ...
        }
      }
    `
    }...

Answer 1

我在此代码中看到两个问题。 第一：

pageUp=() => {
    let skip=this.state.count
}

let语句使skip变量在此函数中处于本地状态。 这不是从你的问题是什么原因导致它被传递到GraphQL查询显而易见的，但如果它是一个成员变量或别的东西，这句话阴影它，你设置一个纯粹的局部变量，其状态都将丢失。

第二：

this.setState({count: this.state.count +2});
let skip=this.state.count

状态更新可能是异步的 ，并且React文档特别建议不要以自己的方式更改状态（存在更适合的基于回调的模式）。 这样做的另一个结果是，到达下一行时，状态实际上可能尚未更新，因此您要将count从“旧”状态分配给skip变量。

查看Gatsby文档时，需要特别注意的是， StaticQuery不支持GraphQL变量 ，尽管浏览它并不建议使用另一条路径。 （每个显示潜在分页数据的示例都只显示第一页。）

Answer 2

您无法通过盖茨比做到这一点。 GraphQL仅在构建时发生，而不在客户端上发生。 您想要获取所有内容，然后使用JS仅显示/跳过要显示的内容。

查看Gatsby文档时，需要特别注意的是，StaticQuery不支持GraphQL变量，尽管浏览它并不建议使用另一条路径。

此外，正如David Maze所说，StaticQuery不支持此类变量。 这在普通查询中也不起作用，因为此类变量需要通过上下文传递。 https://next.gatsbyjs.org/docs/creating-and-modifying-pages/

仅当您通过上下文传递它时，它才可以在pageContext使用，并且可以在查询中用作变量（通常将其用于模板）。

Answer 3

setState（）是异步的。 捕获状态的正确方法是在回调中，还可以使用prev参数在setState（）中引用状态：

this.setState(prev => ({
    count: prev.count + 2
}), () => {
    // here this.state.count was updated and safe to use
});

参考： https : //reactjs.org/docs/react-component.html#setstate