正确执行并避免错误:“警告:无法在未挂载的…上执行React状态更新…”

 useEffect(() => {
    let mounted = true;
    (async () => {
      try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        const newPosts = json.data.children.map(it => it.data);
        if (mounted) {
          setPosts(newPosts);
        }
      } catch (e) {
        console.error(e);
      }
    })();
    return () => {
      mounted = false;
    };
  }, []);

或外部函数和使用对象

useEffect(() => {
  let status = { mounted: true };
  query(status);
  return () => {
    status.mounted = false;
  };
}, []);

const query = async (status: { mounted: boolean }) => {
  try {
    const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
    const json = await response.json();
    const newPosts = json.data.children.map(it => it.data);
    if (status.mounted) {
      setPosts(newPosts);
    }
  } catch (e) {
    console.error(e);
  }
};

或中止控制器

 useEffect(() => {
    const abortController = new AbortController();
    (async () => {
      try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`, { signal: abortController.signal });
        const json = await response.json();
        const newPosts = json.data.children.map(it => it.data);
        setPosts(newPosts);
      } catch (e) {
        if(!abortController.signal.aborted){
           console.error(e);
        }
      }
    })();
    return () => {
      abortController.abort();
    };
  }, []);

我通读了这个问题，觉得答案中没有提到实现useEffect的最佳方法。 假设您有一个网络呼叫，并且希望在得到响应后执行一些操作。 为了简单起见，让我们将网络响应存储在一个状态变量中。 人们可能希望使用action/reducer来更新存储与网络响应。

const [data, setData] = useState(null);

/* This would be called on initial page load */
useEffect(()=>{
    fetch(`https://www.reddit.com/r/${subreddit}.json`)
    .then(data => {
        setData(data);
    })
    .catch(err => {
        /* perform error handling if desired */
    });
}, [])

/* This would be called when store/state data is updated */
useEffect(()=>{
    if (data) {
        setPosts(data.children.map(it => {
            /* do what you want */
        }));
    }
}, [data]);

参考=> https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

当你使用一个async函数

async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}

它返回一个promise，而useEffect并不期望回调函数返回promise，而是期望什么都不返回或返回一个函数。

作为警告的解决方法，您可以使用自调用异步函数。

useEffect(() => {
    (async function() {
        try {
            const response = await fetch(
                `https://www.reddit.com/r/${subreddit}.json`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    })();
}, []);

或者为了更简洁，你可以定义一个函数，然后调用它

useEffect(() => {
    async function fetchData() {
        try {
            const response = await fetch(
                `https://www.reddit.com/r/${subreddit}.json`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    };
    fetchData();
}, []);

第二种解决方案将使其更易于阅读，并将帮助您编写代码，以便在触发新请求时取消以前的请求或将最新的请求响应保存在状态中

工作codesandbox

对于React版本<=17

我建议看看Dan Abramov (React核心维护者之一)的回答:

我觉得你把事情搞得太复杂了。

function Example() {
  const [data, dataSet] = useState<any>(null)

  useEffect(() => {
    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await response.json()
      dataSet(response)
    }

    fetchMyAPI()
  }, [])

  return <div>{JSON.stringify(data)}</div>
}

从长期来看，我们将不鼓励这种模式，因为它助长了竞争条件。例如-在你的呼叫开始和结束之间任何事情都可能发生，你可以得到新的道具。相反，我们将推荐使用悬疑来获取数据，它看起来更像

const response = MyAPIResource.read();

没有影响。但与此同时，你可以将异步的东西移动到一个单独的函数并调用它。

你可以在这里阅读更多关于实验悬疑的内容。

如果你想使用eslint外部的函数。

 function OutsideUsageExample({ userId }) {
  const [data, dataSet] = useState<any>(null)

  const fetchMyAPI = useCallback(async () => {
    let response = await fetch('api/data/' + userId)
    response = await response.json()
    dataSet(response)
  }, [userId]) // if userId changes, useEffect will run again

  useEffect(() => {
    fetchMyAPI()
  }, [fetchMyAPI])

  return (
    <div>
      <div>data: {JSON.stringify(data)}</div>
      <div>
        <button onClick={fetchMyAPI}>manual fetch</button>
      </div>
    </div>
  )
}

对于React版本>=18

从React 18开始，你也可以使用悬念，但如果你没有使用正确实现它的框架，还不建议使用它:

在React 18中，你可以开始在Relay、Next.js、Hydrogen或Remix等自以为是的框架中使用悬念来获取数据。从技术上讲，使用悬疑技术获取临时数据是可行的，但仍然不推荐作为一般策略。

如果不是框架的一部分，您可以尝试一些库来实现它，比如swr。

这是一个非常简单的悬念例子。你需要为悬疑抛出一个承诺来捕获它，首先显示回退组件，并在承诺被解决时呈现Main组件。

let fullfilled = false;
let promise;

const fetchData = () => {
  if (!fullfilled) {
    if (!promise) {
      promise = new Promise(async (resolve) => {
        const res = await fetch('api/data')
        const data = await res.json()

        fullfilled = true
        resolve(data)
      });
    }

    throw promise
  }
};

const Main = () => {
  fetchData();
  return <div>Loaded</div>;
};

const App = () => (
  <Suspense fallback={"Loading..."}>
    <Main />
  </Suspense>
);

对于使用React Hooks从外部API中获取，你应该调用一个从useEffect钩子内部的API中获取的函数。

是这样的:

async function fetchData() {
    const res = await fetch("https://swapi.co/api/planets/4/");
    res
      .json()
      .then(res => setPosts(res))
      .catch(err => setErrors(err));
  }

useEffect(() => {
    fetchData();
}, []);

我强烈建议你不要在useEffect钩子中定义你的查询，因为它会被无限次地重新渲染。由于不能将useEffect设置为异步，所以可以将其中的函数设置为异步。

在上面所示的例子中，API调用在另一个单独的异步函数中，因此它确保调用是异步的，并且只发生一次。此外，useEffect的依赖数组([])是空的，这意味着它的行为就像React类组件中的componentDidMount一样，它只会在组件被挂载时执行一次。

对于加载文本，你可以使用React的条件渲染来验证你的帖子是否为空，如果是，渲染一个加载文本，否则，显示帖子。当你完成从API获取数据并且post不为空时，else将为真。

{posts === null ? <p> Loading... </p> 
: posts.map((post) => (
    <Link key={post._id} to={`/blog/${post.slug.current}`}>
      <img src={post.mainImage.asset.url} alt={post.mainImage.alt} />
      <h2>{post.title}</h2>
   </Link>
))}

我看到你已经在使用条件渲染，所以我建议你深入了解它，特别是验证对象是否为空!

如果您需要更多关于使用Hooks使用API的信息，我建议您阅读以下文章。

https://betterprogramming.pub/how-to-fetch-data-from-an-api-with-react-hooks-9e7202b8afcd

https://reactjs.org/docs/conditional-rendering.html

使用自定义库提供的useAsyncEffect钩子，安全地执行异步代码并在效果中发出请求变得微不足道，因为它使您的代码可自动取消(这只是功能列表中的一件事)。查看带有JSON抓取的Live Demo

import React from "react";
import { useAsyncEffect } from "use-async-effect2";
import cpFetch from "cp-fetch";

/*
 Notice: the related network request will also be aborted
 Checkout your network console
 */

function TestComponent(props) {
  const [cancel, done, result, err] = useAsyncEffect(
    function* () {
      const response = yield cpFetch(props.url).timeout(props.timeout);
      return yield response.json();
    },
    { states: true, deps: [props.url] }
  );

  return (
    <div className="component">
      <div className="caption">useAsyncEffect demo:</div>
      <div>
        {done ? (err ? err.toString() : JSON.stringify(result)) : "loading..."}
      </div>
      <button className="btn btn-warning" onClick={cancel} disabled={done}>
        Cancel async effect
      </button>
    </div>
  );
}

export default TestComponent;

同样的演示使用了axios