无法获取 API URL 以重新路由到正确的地址：React Hooks

Posted 2023-02-22

【中文标题】无法获取 API URL 以重新路由到正确的地址：React Hooks

【英文标题】：Can't get API URL to reroute to right address: React Hooks

【发布时间】：2021-01-25 00:33:34

【问题描述】：

我正在尝试构建一个项目来重新制作jobs.github.com 页面。我已经完成了主页和个人工作页面，但是当我输入搜索参数时，我不能做的是 git 应用程序重新路由到正确的路径。

这是我的 useHomeFetch 页面：

import React,  useEffect, useState  from 'react';

export const useHomeFetch = () => 
    const [state, setState] = useState( jobs: [] );
    const [loading, setLoading] = useState(false);
    const BASE_URL = 'https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions';

    const fetchJobs = async url => 
        setLoading(true);

        let loadMore = url.search('page');

        try 
            let result = await (await fetch(url)).json();
            setState(prev => (
                ...prev, 
                jobs: loadMore !== -1
                    ? [...prev.jobs, ...result]
                    : [...result]
            ))
         catch(error) 
            console.log(error)
        

        setLoading(false)
    

    useEffect(() => 
        fetchJobs(`$BASE_URL.json`)
    , [])

    return [ state, loading, BASE_URL , fetchJobs];

这里是搜索栏：

const SearchBar = () => 
    const [ BASE_URL , fetchJobs] = useHomeFetch();;

    const runThis = (e) => 
        e.preventDefault()
       let search = descriptionEl.current.value.trim() !== ''
            ?   `description=$descriptionEl.current.value`.replace(/ /g, '+')
            :   '';

        let location = locationEl.current.value.trim() !== ''
            ?  `location=$locationEl.current.value`.replace(/ /g, '+')
            :   '';

        let full = fullTime ? `full_time=true` : ''

        fetchJobs(`$BASE_URL.json?$search$location$full`)        
    

    return (
        <form className="search__bar" onClick=runThis> ...

每当我输入搜索参数时，它都会返回到原始页面。我相信这是因为useHomeFetch页面中的useEffect。我如何才能运行相同的函数，但只使用基于参数的正确 URL？

谢谢！

【问题讨论】：

将onClick 处理程序附加到表单是否正确？它不应该等待一些输入然后调用onSubmit 处理程序吗？

【参考方案1】：

看起来好像您没有计算有效的 URL 查询字符串。您将它们连接起来以生成一个类似https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions?description=kdskj+dslkjlocation=lksd+kljdsfkljfull_time=true 的 URL，其中它们没有用 & 符号 (&) 分隔。

我相信您的预期查询字符串应该是https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions?description=kdskj+dslkj&location=lksd+kljdsfklj&full_time=true

通过将所有查询参数转储到一个数组中进行更新，并将它们与& 连接起来。

const runThis = (e) => 
    e.preventDefault()
   let search = descriptionEl.current.value.trim() !== ''
        ?   `description=$descriptionEl.current.value`.replace(/ /g, '+')
        :   '';

    let location = locationEl.current.value.trim() !== ''
        ?  `location=$locationEl.current.value`.replace(/ /g, '+')
        :   '';

    let full = fullTime ? `full_time=true` : ''

    fetchJobs(`$BASE_URL.json?$[search, location, full].join('&'`)        

【讨论】：

我一直在想如何将他们与 & 一起加入。非常感谢您！

@Diarrah 酷。如果这解决了您的问题，那么请接受答案，如果您觉得有帮助，请点赞。干杯