我正在尝试使用静态查询和 GraphQL 从 Contentful 获取一个简单的标题，将其传递给状态，然后在渲染中显示。我不能让它工作。我附上了一张显示我当前设置和错误的图像。
可能的问题： 1.查询返回一个数组，我需要把它改成字符串，或者访问0个元素，第一个，因为我的内容类型只有一个，因为它是一个单页。
- 将查询放在组件中，我不确定它是否可以放在组件的构造函数中
为了进行比较：在我的文件的屏幕中，您可以看到一个显示 Josh Perez 的变量名称，当我取消注释并将其添加到 this.state = { dataTest: name} 时，然后在 RENDER 中： this.state.dataTest 返回名称 Josh Perez 很好，所以将变量传递给 state 是可行的，但是从 graphql 查询传递字符串对我来说是不可能的......
我有一个限制，那就是我需要用一个类创建我的页面组件，因为在组件中确实挂载了我放置了一些 JQuery，这对我来说效果很好。
这是我的测试代码 1. 在构造函数中
class IndexPage extends React.Component {
constructor(props) {
super(props);
// this.state = { data: null };
const name = 'Josh Perez';
this.state = { dataTest: name };
}
在渲染中
{this.state.dataTest}
这是有效的，变量名称被传递给状态并显示在渲染中。
但是，我想以这种方式显示一个来自 Contentful 的简单文本字符串。所以我正在尝试这样的代码（错误消息显示在屏幕上）：
class IndexPage extends React.Component {
constructor(props) {
super(props);
// this.state = { data: null };
//const name = 'Josh Perez';
const data = useStaticQuery(graphql`
query {
allContentfulHomepage (limit: 1) {
edges {
node {
section1Title
}
}
}
}
`)
this.state = { dataTest: data };
事实证明，以下建议的解决方案有效。我正在尝试调用更多内容。这是行不通的。它显示以下错误“无法读取未定义的属性‘地图’”。我将非常感谢您提出如何改进它，如何使其发挥作用的建议。
export default class Test extends Component {
state = {
dataTest: this.props.data.test.edges.map(({ node: test }) =>
test.section1Title),
dataTest2: this.props.data.test.edges.map(({ node: test }) =>
test.section2Lead),
dataTest3: this.props.data.test.edges.map(({ node: test }) =>
test.section1Text.json)
}
render() {
return <div>
<h1>{this.state.dataTest}</h1>
<h1>{this.state.dataTest2}</h1>
{documentToReactComponents(this.state.dataTest3)}
</div>
}
}
export const query = graphql`
{
test:allContentfulHomepage(limit: 1) {
edges {
node {
section1Title
section2Lead
section1Text {
json
}
}
}
}
}
`