javascript - 如何在 JavaScript 中将多行字符串值转换为合法的 JSON 字符串变量？

Question

这个原始代码工作正常。

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

但是，我不喜欢 String 的连接query。所以我改为下面。

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 格式。

我该如何解决这个问题？

标签： javascriptreactjs

Answer 1

哦，我的坏。显然我有一个额外的"

替换这个

    query GetWikicountByKeyword($keyword: String!) {
        wikiCount
            (keyword: $keyword) {
                keyword 
                totalhits
            } 
    "}`.replace("\n", " ").trim()

和

    query GetWikicountByKeyword($keyword: String!) {
        wikiCount
            (keyword: $keyword) {
                keyword 
                totalhits
            } 
    }`

现在工作。谢谢！！