graphql - 如何解决“有效负载不可序列化:将循环结构转换为 JSON”错误?
问题描述
如何解决“有效负载不可序列化:将循环结构转换为 JSON”错误?
我目前正在探索 Apollo、GraphQL 和 Material-UI。我从来没有遇到过这个错误,并且一直在通过 Stack Overflow 和博客文章寻找解决方案。
我一直在阅读有关循环结构的文章,但在我当前的代码库中无法识别任何内容。
我需要对进入的变量进行字符串化createLink
吗?
完整的错误信息:
Network request failed. Payload is not serializable: Converting circular structure to JSON
--> starting at object with constructor 'HTMLInputElement'
| property '__reactFiber$b12dhgch1cn' -> object with constructor 'FiberNode'
--- property 'stateNode' closes the circle
链接列表.js:
export default function LinkList() {
const classes = useStyles();
const { loading, error, data } = useQuery(LINK_QUERY);
if (loading) {
return (
<Typography component={"span"}>
<span className={classes.grid}>Fetching</span>
</Typography>
);
}
if (error) {
return (
<Typography component={"span"}>
<span className={classes.grid}>Error! ${error.message}</span>;
</Typography>
);
}
const linksToRender = data.allLinks;
return (
<Typography component={"span"}>
<div className={classes.root}>
<Box className={classes.box}>
{linksToRender.map((link, index) => (
<Link
className={classes.link}
key={link.id}
link={link}
index={index}
/>
))}
</Box>
</div>
</Typography>
);
}
创建链接.js:
export default function CreateLink() {
const [state, setState] = useState({
slug: "",
description: "",
link: ""
});
const classes = useStyles();
function handleChange(e) {
const value = e.target.value;
setState({
...state,
[e.target.name]: value
});
}
const [createLink] = useMutation(CREATE_LINK);
function handleSubmit(e) {
e.preventDefault();
console.log(state.slug);
createLink({
variables: {
slug: state.slug,
description: state.description,
link: state.link
}
});
setState({
slug: "",
description: "",
link: ""
});
}
return (
<Grid container className={classes.root}>
<form onSubmit={handleSubmit}>
<Grid item>
<TextField
className={classes.textfield}
inputProps={{ maxLength: 12 }}
id="slug"
name="slug"
label="Link Alias"
variant="outlined"
type="text"
value={state.slug}
onChange={handleChange}
/>
</Grid>
<Grid item>
<TextField
required
className={classes.textfield}
id="description"
name="description"
label="Description"
variant="outlined"
type="text"
value={state.description}
onChange={handleChange}
/>
</Grid>
<Grid item>
<TextField
required
className={classes.textfield}
id="link"
name="link"
label="URL"
variant="outlined"
type="text"
value={state.link}
onChange={handleChange}
/>
</Grid>
<Grid item>
<Button variant="outlined" type="submit" className={classes.button}>
Shorten URL
</Button>
</Grid>
</form>
</Grid>
);
}
感谢您查看问题。
解决方案
该错误可能是由传入undefined
的对象中的属性值引起的。variables
createLink()
createLink({
variables: {
slug: state.slug,
description: state.description,
link: state.link
}
})
推荐阅读
- typescript - 为什么这适用于类型别名,但不适用于接口
- python - 谷歌云日志在使用 python 时不起作用
- python - leetcode 问题 搜索 2d 矩阵 问题 74
- ios - PromiseKit 6 iOS 链接
- docker - Asp.Net Core 5 Docker 容器退出(一)
- php - PHP 不会使用 $_POST 回显任何内容
- django - 在模板中处理一对多模型关系 (Django)
- angular - PrimeNG 树表 - 如何停止向上传播?
- c# - 有没有办法将 Spotify 访问令牌与 ASP.NET 身份用户相关联?
- javascript - 在 html 或 js 中选择特定时间的所有复选框