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

我正试图构建一个项目来重新制作

jobs.github.com

页面。我已经完成了主页和个人作业页面，但我不能做的是让应用程序在我输入搜索参数时重新路由到正确的路径

这是我的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}> ...

const SearchBar=（）=>{
const[{BASE_URL}，fetchJobs]=useHomeFetch（）；；
常量runThis=（e）=>{
e、 预防默认值（）
让搜索=descriptionEl.current.value.trim（）！=''
？`description=${descriptionEl.current.value}`.replace（//g，'+'））
:   '';
let location=locationEl.current.value.trim（）！=''
？`location=${locationEl.current.value}`.replace（//g，'+'））
:   '';
让full=fullTime？`full\u time=true`:''
fetchJobs（`${BASE\u URL}.json？${search}${location}${full}`）
}
返回(
...

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

---

谢谢！

看起来好像您没有计算有效的URL查询字符串。您将它们连接起来以生成类似

https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions?description=kdskj+dslkjlocation=lksd+kljdsfkljfull_time=true

，它们之间没有用符号（

&

）分隔

我相信您想要的查询字符串应该是

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('&'}`)        
}

---

将

onClick

处理程序附加到表单上是否正确？是否应该等待一些输入，然后调用

onSubmit

处理程序？我一直在想如何将它们加入到&中。非常感谢！@Diarrah Cool。如果这解决了您的问题，请接受答案，如果您觉得有帮助，请进行投票。干杯