首页 > 解决方案 > 使用 useEffect() 并获取两次

问题描述

我正在使用 React Hooks,UseEffect但是当我尝试记录响应时,我得到的数组记录了两次。如您所见,我[]UseEffect. 此外,当我在钩子内打印一些东西时,它只记录一次。

在此处输入图像描述

JobsApi.tsx

const url = "http://jobs.github.com/positions.json";

export function getJobs() {
    const proxyurl = "https://cors-anywhere.herokuapp.com/";

    return fetch(proxyurl + url)
    .then((response) => response.json())
    .then((responseJson) => {
        return responseJson;
    })
    .catch((error) => {
        console.error(error);
        return;
    });
}

盒子结果.tsx

import React, { useState, useEffect } from 'react';

import { getJobs } from '../../service/api/JobsApi';

const BoxResult = () => {
    const [fetchJobs, setFetchedJobs] = useState([]);
    useEffect(() => {
        const fetchAPI = async () => {
            console.log('ACAADADAS');
            setFetchedJobs(await getJobs());
        }

        console.log('i fire once');

        fetchAPI();
    }, [])

    console.log(fetchJobs);

    return (
        <div>
        ACA
            {/* {fetchedCountries.map((country, i) => <div key={i} value={country}>{country}</div>)} */}
        </div>
    )
}

export default BoxResult

标签: javascriptreactjsreact-hooksfetch

解决方案


推荐阅读