javascript - 使用 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
解决方案
推荐阅读
- python - 如何在 Linux 中使用 bash 和 for 循环水平连接文本文件?
- php - 是否可以在 symfony 中自动为表单提交添加价值?
- php - 获取多维数组中的元素计数并指定过滤器
- javascript - 如何在 JavaScript 中创建短代码?
- javascript - 为什么在 truffle exec 中等待工作而 .then 不起作用?
- python - Keras 的几个类别分类
- webpack - Webpack 文件加载器调整公共路径
- reactjs - 我是否需要 Azure AD 应用才能将我的 Power BI 报告嵌入到我自己的应用中?
- c++ - C++动态数组分配和memset的奇怪使用
- java - 休眠会话:如何在进行更改之前始终获取我的实体的最新状态