Javascript Axios GET请求-参数应如何工作

我想澄清“params”作为axios.get参数的目的

我在我的React应用程序中实现了一个搜索栏，但我无法通过参数过滤结果

基于我遵循的几个教程，params应该可以帮助我过滤从API调用中得到的响应。例如，考虑来自GitHub Jobs API的响应中包含的一个元素，我希望如果我作为params

params:{location:“Austin，TX”}

传递，最终的响应应该包含具有该特定位置的所有元素

例如，axios指南中的示例提到了基于ID的过滤，因此我推断这对于响应返回的元素的任何其他键都应该是相同的

在我的应用程序中，我有一个选择功能，其中包含数据中所有可用的位置。当选择一个时，它更新

过滤器

变量，该变量变为，例如，

{location:“Austin，TX”}

。这是我传递的值，但它仍然不会过滤结果。 正如您在下面看到的，我有一个SearchForm.js，我从下拉列表中选择了一个位置，它进入App.js中的handleParamChange，它使用过滤器调用useFetchJobs.js函数，API调用的结果应该会回来

useFetchJobs.js

const BASE_URL =
    'https://api.allorigins.win/raw?url=https://jobs.github.com/positions.json';

function useFetchJobs(filters) {
    const [state, dispatch] = useReducer(reducer, {
        jobs: [],
        locations: [],
        loading: true,
    });

    useEffect(() => {
        const cancelToken1 = axios.CancelToken.source();

        axios
            .get(BASE_URL, {
                params: { ...filters },
            })
            .then((res) => {
                var loc = res.data.map((item) => item.location);
                loc = [...new Set(loc)];
                loc.sort();

                dispatch({
                    type: ACTIONS.GET_DATA,
                    payload: { jobs: res.data, locations: loc },
                });
            })
            .catch((e) => {
                if (axios.isCancel(e)) return;
                dispatch({ type: ACTIONS.ERROR, payload: { error: e } });
            });

        return () => {
            cancelToken1.cancel();
        };
    }, [filters, page]);
    return state;
}

SearchForm.js
位置
{位置！==未定义&&
位置。地图（（loc）=>(
{loc}
))}

我错过什么了吗？非常感谢

---

请在代码示例中向我们展示如何使用axios。打开开发工具的

网络
选项卡和/或确保开发工具
控制台
显示发出的每个AJAX请求。当您发出此请求时，URL是否包含德克萨斯州奥斯汀的
location=Austin
信息？如果没有，则可能您没有正确地向axios提供
参数。感谢您的回复。我用代码更新了帖子。此外，根据@therobinkim的建议，我可以看到URL是“”。我希望用问号而不是符号。我错了吗？为什么不将URL设置为
https://api.allorigins.win/raw?url=https://jobs.github.com/positions.json?location=Austin，TX
要启动吗？我想知道axios是否在URL的开头看到了
？
，只是通过
&
附加了额外的aram
App.js

function App() {
    const [filters, setFilters] = useState({});

    const { jobs, locations, loading, error } = useFetchJobs(filters);

    function handleParamChange(e) {
        const param = e.target.name;
        const value = e.target.value;
        setFilters((prevFilters) => {
            return { ...prevFilters, [param]: value };
        });
    }
    return(stuff)
}


SearchForm.js

<Form.Group as={Col} lg={4}>
    <Form.Label>Location</Form.Label>
    <Form.Control
        onChange={onParamChange}
        name='location'
        as='select'
        size='lg'>
        <option></option>
        {locations !== undefined &&
            locations.map((loc) => (
                <option value={loc}>{loc}</option>
            ))}
    </Form.Control>
</Form.Group>