我可以使用两个 useEffect 并在地图中包含地图吗

由于您是 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 key={repo.id}>          <div>            <h2>Name: {repo.name}</h2>          </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() 。做一些谷歌搜索，如果我现在告诉你一切就不好了。那就试一试吧。

我可以使用两个 useEffect 并在地图中包含地图吗

2回答