[英]How to convert multiline string value to a legit JSON string variable in JavaScript?
这个原始代码工作正常。
function FetchNormal() {
const [keyword, setKeyword] = React.useState(null);
const [response, setResponse] = React.useState(null);
const [error, setError] = React.useState(null);
const [isLoading, setIsLoading] = React.useState(false);
React.useEffect(() => {
const FetchData = async () => {
try {
setError(null)
setIsLoading(true)
const method = "POST"
const headers = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
const options = {
method,
headers
};
const body = {
query: "query GetWikicountByKeyword($keyword: String!)" +
"{ wikiCount " +
" (keyword: $keyword) { " +
" keyword " +
" totalhits " +
" } " +
"} ",
variables : "{ \"keyword\": \"" + keyword +"\" }"
};
if (keyword == null) {
setResponse("No Result");
} else {
if (body) options.body = JSON.stringify(body);
const res = await fetch(BASEURL, options);
const json = await res.json();
setResponse(json.data.wikiCount.keyword + ":" + json.data.wikiCount.totalhits);
}
} catch (error) {
setError(error.toString());
setResponse(null)
}
setIsLoading(false)
};
FetchData();
}, [keyword]);
return (
<div>
<div><SearchBox caption={"Normal Wiki Search"} onSubmit={(keyword) => setKeyword(keyword) }/></div>
<div>
{error && <SearchResult value={error} />}
{isLoading ?
(<Loading />) :
(response && <SearchResult value={response}/>)
}
</div>
</div>
);
}
但是,我不喜欢query
的 String 连接。 所以我改为下面。
function FetchNormal() {
const query = `
query GetWikicountByKeyword($keyword: String!) {
wikiCount
(keyword: $keyword) {
keyword
totalhits
}
"}`.replace("\n", " ").trim()
const [keyword, setKeyword] = React.useState(null);
const [response, setResponse] = React.useState(null);
const [error, setError] = React.useState(null);
const [isLoading, setIsLoading] = React.useState(false);
React.useEffect(() => {
const FetchData = async () => {
try {
setError(null)
setIsLoading(true)
const method = "POST"
const headers = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
const options = {
method,
headers
};
const body = {
query: query,
variables : "{ \"keyword\": \"" + keyword +"\" }"
};
if (keyword == null) {
setResponse("No Result");
} else {
if (body) options.body = JSON.stringify(body);
const res = await fetch(BASEURL, options);
const json = await res.json();
setResponse(json.data.wikiCount.keyword + ":" + json.data.wikiCount.totalhits);
}
} catch (error) {
setError(error.toString());
setResponse(null)
}
setIsLoading(false)
};
FetchData();
}, [keyword]);
return (
<div>
<div><SearchBox caption={"Normal Wiki Search"} onSubmit={(keyword) => setKeyword(keyword) }/></div>
<div>
{error && <SearchResult value={error} />}
{isLoading ?
(<Loading />) :
(response && <SearchResult value={response}/>)
}
</div>
</div>
);
}
但它现在失败了,因为换行符开始,无论我如何尝试删除它,它都会保留,导致错误的 JSON 格式。
我该如何解决这个问题?
哦,我的坏。 显然我有一个额外的"
替换这个
query GetWikicountByKeyword($keyword: String!) {
wikiCount
(keyword: $keyword) {
keyword
totalhits
}
"}`.replace("\n", " ").trim()
和
query GetWikicountByKeyword($keyword: String!) {
wikiCount
(keyword: $keyword) {
keyword
totalhits
}
}`
现在工作。 谢谢!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.