javascript - 使用graphql API时出现reactjs错误
问题描述
尝试在 react js 应用程序中使用 graphql API。不确定这种方法是否正确。
import React, { Component } from 'react'
import "./styles.css";
import axios from 'axios';
const appBaseUrl = axios.create({
baseURL: 'http://localhost:8099/graphql'
});
const tagslist = ` {
getTags
{
id
tagName
tagDesc
tagVersion
tagVersion
}
}
`;
class TagsController extends React.Component {
constructor(props) {
super(props);
this.state = { tags: []};
this.headers = [
{ key: "id", label: "Tag Id" },
{ key: "tagName", label: "Tag Name" },
{ key: "tagDesc", label: "Tag Description" },
{ key: "tagVersion", label: "Tag Version" }
];
}
componentDidMount() {
appBaseUrl
.post('', { query: tagslist })
.then(result =>
this.setState(() => ({
tags: result
})),
);
}
render() {
console.log("...... url builder ......")
const { tags } = this.state;
return (
<table border ="1">
<thead>
<tr>
{
this.headers.map(function(h) {
return (
<th key = {h.key}>{h.label}</th>
)
})
}
</tr>
</thead>
<tbody>
{tags &&
tags.data &&
tags.data.getTags.map(function(item, key) {
return (
<tr key={key}>
<td>{item.id}</td>
<td>{item.tagName}</td>
<td>{item.tagDesc}</td>
<td>{item.tagVersion}</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
export default TagsController;
下面是例外。
× 未处理的拒绝(TypeError):无法读取未定义的属性“映射”
TagsController.render src/TagsController.js:59 56 | } 57 | </tr> 58 | </thead> 59 | <tbody> | ^ 60 | {tags && 61 | tags.data && 62 | tags.data.getTags.map(function(item, key) { View compiled ▶ 18 stack frames were collapsed. (anonymous function) src/TagsController.js:35 32 | 33 | componentDidMount() { 34 | appBaseUrl 35 | .post('', { query: tagslist }) | ^ 36 | .then(result => 37 | this.setState(() => ({ 38 | tags: result
来自 API 的异常响应如下。
{
"data": {
"getTags": [
{
"id": "ef718cce-1269-4fbd-827c-832f7824c025",
"tagName": "Veera6",
"tagDesc": "Test Tag6",
"tagVersion": 0
},
{
"id": "0cda5ae9-e287-4666-804a-03f25e642d1f",
"tagName": "Veera9",
"tagDesc": "Test Tag9",
"tagVersion": 0
},
{
"id": "31f8f042-dbc0-4dbf-ada8-b94c7e2d2a39",
"tagName": "Veera8",
"tagDesc": "Test Tag8",
"tagVersion": 0
},
{
"id": "6292054c-8bfc-4d2d-b2f8-92e2bac5a578",
"tagName": "Veera7",
"tagDesc": "Test Tag7",
"tagVersion": 0
},
{
"id": "c6756e5c-8fa5-40a9-ab92-5242bda97de3",
"tagName": "Veera10",
"tagDesc": "Test Tag10",
"tagVersion": 0
}
]
}
}
基本上我正在尝试使用 graphql 查询 API 并使用 react js 应用程序显示结果列表,但出现上述错误。看起来我在使用 graphql api 并构造 graphql 查询参数时遗漏了一些东西
任何帮助都非常感谢。
解决方案
tags
在状态下不会有一段array
时间请求数据。您需要添加另一个条件以在请求数据时显示加载消息。
componentDidMount() {
this.setState(() => ({ loading: true }))
appBaseUrl
.post('', { query: tagslist })
.then(result =>
this.setState(() => ({
tags: result,
loading: false
})),
);
}
render() {
console.log("...... url builder ......")
const { tags, loading } = this.state;
if (loading) {
return "Loading data..."
}
}
你可以在网上找到很多idea,例如: http: //nikolay.rocks/2017-06-18-better-redux-loading
推荐阅读
- formula - PHPExcel INDEX 使用 AGGREGATE 函数产生损坏的文件
- javascript - DRY反应输入处理导致光标跳转
- android - 如何在不使用 NavController 将其添加到 backstack 的情况下导航片段?
- c++ - 将字符串元素与数字进行比较
- mysql - 两台不同服务器上相同的 Mysql Server Cache 设置,但结果不同
- database - 使用 Apache Kafka 的传感器流数据生成器
- fiware - 连接多个设备时如何改善套接字挂断?
- php - 查找方法中的MongoDB error500
- javascript - Meteor.call() 后 Meteor 重启客户端
- three.js - 我们可以在 three.js 中显示超出画布(3D 空间)的几何图形吗