如何解决"Payload is not serializable: Converting circular structure to JSON"错误？

Question

如何解决"有效负载不可序列化：将循环结构转换为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

LinkList.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>
);
}

CreateLink.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>
);
}

谢谢你检查这个问题。

Answer 1

错误可能是由传递到createLink()的variables对象中的undefined属性值引起的。

createLink({
variables: {
slug: state.slug,
description: state.description,
link: state.link
}
})