首頁猿問我可以使用兩個 useEffect...

我可以使用兩個 useEffect 并在地圖中包含地圖嗎

JavaScript

臨摹微笑 2023-07-29 16:18:19

我是 React 新手，希望獲得有關以下問題的幫助。我目前有這個代碼。 import React, { useState, useEffect } from "react";function FetchData() { const [repos, setRepos] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { fetch("https://api.github.com/orgs/org_name/repos") .then((res) => res.json()) .then((data) => { setRepos(data); }) .then(() => { setIsLoading(false); }) .catch((err) => console.log(err)); }, []);return ( <div> {repos.map((repo) => ( <div key={repo.id}> <div> <h2>Name: {repo.name}</h2> <p>Top 5 Contributors</p>))}我的上面的代碼工作正常，但我現在的問題是，我想將前 5 位貢獻者添加到存儲庫中，并訪問我必須訪問的內容，https://api.github.com/repos/org_name/{repos}/contributors并且要訪問它，我首先必須使用repo.contributor_url 是否應該使用另一個useEffect和map顯示前 5 位貢獻者？編輯基本上我想做這樣的事情。useEffect(() => { fetch(`${repos.contributors_url}`) .then((res) => res.json()) .then((data) => { setContributors(data); console.log(data); }) .catch((err) => console.log(err)); }, []);...<p> Top 5 Contributors: </p> <ul> {contributors.map((c, i) => { <li key={i}>{c.name}</li> )} </ul>

查看完整描述

2 回答

白板的微信

TA貢獻1883條經驗獲得超3個贊

由于您是 React 新手。React 曾經使用基于類的組件來處理狀態，并且這些基于類的組件具有稱為生命周期方法的特殊函數。但從React 16.8開始，React 社區提出了React-Hooks，功能組件現在可以用來處理狀態，useState() 和 useEffect()是 Hooks 的例子。

現在useEffect()單獨用于執行生命周期方法的工作。

您在代碼中使用useEffect() 的方式是模擬componentDidMount()，因為您將第二個參數保留為空數組[]

我們可以使用useEffect() Hook 本身來使用其他生命周期方法，例如componentDidUpdate()和componetnWillUnmount() 。

然后根據您的要求，您可以根據組件的需要多次使用 useEffect() Hook。

現在來更新你的問題的部分：

所以，你基本上需要進行承諾鏈。我們知道fetch()是基于 Promise 的，因此當一個異步調用得到解決并且我們僅在useEffect()掛鉤內獲取第一個數據時，您需要使用第二個 url 端點發出另一個異步請求來獲取相應的數據數據。

這是現在更新的代碼：試試這個

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

function FetchData() {

const [repos, setRepos] = useState([]);

const [isLoading, setIsLoading] = useState(true);

const [contributors, setContributors] = useState([]);

const [isContributorLoading, setIsContributorLoading] = useState(true);

useEffect(() => {

fetch('https://api.github.com/orgs/{org}/repos')

.then((res) => res.json())

.then((data) => {

setRepos(data); // Data 1(repos) is received

// Now We make another API call to get Data 2 (contributors)

return fetch('https://api.github.com/repos/{org}/{repos}/contributors');

})

.then((res) => res.json()) // Chaining promise,handling 2nd Fetch request

.then((data2) => {

console.log(data2);

setContributors(data2);

})

.then(() => {

setIsLoading(false);

})

.catch((err) => console.log(err));

}, []);

return (

<div>

{ repos.length && repos.map((repo) => (

<div>

</div>

))}

<p> Top 5 Contributors: </p>

<ul>

{contributors.length && contributors.map((c, i) => {

return <li key={i}>{c.name}</li>

)}

</ul>

</div>

);

}

所以，基本上你現在需要更多地了解如何使用 Hooks 特別是useEffect() 。做一些谷歌搜索，如果我現在告訴你一切就不好了。那就試一試吧。

反對回復 2023-07-29

千萬里不及你

TA貢獻1784條經驗獲得超9個贊

可以直接調用一個useEffect內部的api。

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

function App() {

const [repos, setRepos] = useState([]);

const [contributor, setContributor] = useState([]);

const [isLoading, setIsLoading] = useState(true);

useEffect(() => {

async function caller() {

try {

setIsLoading(true);

const response = await fetch(

"https://api.github.com/orgs/octokit/repos"

);

const result = await response.json();

const contri = [];

console.log(result);

result.forEach((item) => {

contri.push(fetch(`${item.contributors_url}`));

});

Promise.all(contri)

.then((contributorResults) => contributorResults)

.then((responses) => {

console.log(responses);

return Promise.all(responses.map((r) => r.json()));

})

.then((cont) => {

setContributor([...cont])

});

setRepos(result);

} catch (err) {

console.log(err);

} finally {

setIsLoading(false);

}

caller();

}, []);

return (

<div>

{repos.map((repo,index) => (

{ contributor[`${index}`] && contributor[`${index}`].slice(0,5).map(item => {

return <div key={item.id}>

<div>{item.login}</div>

</div>

})}

</div>

))}

{isLoading && <div>...loading</div>}

</div>

);

}

export default App;

反對回復 2023-07-29

2 回答
0 關注
166 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

我可以使用兩個 useEffect 并在地圖中包含地圖嗎

我可以使用兩個 useEffect 并在地圖中包含地圖嗎

2 回答

添加回答