我正在尝试以下useEffect示例：
useEffect(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);
}
}, []);
我在控制台中收到此警告。但是我认为清理对于异步调用是可选的。我不确定为什么会收到此警告。链接沙箱示例。https://codesandbox.io/s/24rj871r0p
我建议在此处查看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>
}
从长远来看，我们将不鼓励这种模式，因为它鼓励竞争条件。比如——在你的通话开始和结束之间可能会发生任何事情，你可能会得到新的props。相反，我们会推荐 Suspense 进行数据获取，它看起来更像
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
// if you want to run only once, just leave array empty []
useEffect(() => {
fetchMyAPI()
}, [fetchMyAPI])
return (
<div>
<div>data: {JSON.stringify(data)}</div>
<div>
<button onClick={fetchMyAPI}>manual fetch</button>
</div>
</div>
)
}
如果您将使用 useCallback，请查看 useCallback 工作原理的示例。沙盒。
import React, { useState, useEffect, useCallback } from "react";
export default function App() {
const [counter, setCounter] = useState(1);
// if counter is changed, than fn will be updated with new counter value
const fn = useCallback(() => {
setCounter(counter + 1);
}, [counter]);
// if counter is changed, than fn will not be updated and counter will be always 1 inside fn
/*const fnBad = useCallback(() => {
setCounter(counter + 1);
}, []);*/
// if fn or counter is changed, than useEffect will rerun
useEffect(() => {
if (!(counter % 2)) return; // this will stop the loop if counter is not even
fn();
}, [fn, counter]);
// this will be infinite loop because fn is always changing with new counter value
/*useEffect(() => {
fn();
}, [fn]);*/
return (
<div>
<div>Counter is {counter}</div>
<button onClick={fn}>add +1 count</button>
</div>
);
}
当您使用异步函数时
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);
}
}
它返回一个useEffectPromise并且不期望回调函数返回 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();
}, []);
第二种解决方案将使其更易于阅读，并将帮助您编写代码以在触发新请求时取消先前的请求或将最新的请求响应保存在状态
在 React 提供更好的方法之前，您可以创建一个助手，useEffectAsync.js：
import { useEffect } from 'react';
export default function useEffectAsync(effect, inputs) {
useEffect(() => {
effect();
}, inputs);
}
现在你可以传递一个异步函数：
useEffectAsync(async () => {
const items = await fetchSomeItems();
console.log(items);
}, []);
更新
如果您选择这种方法，请注意它是错误的形式。当我知道它是安全的时，我会求助于这个，但它总是糟糕的形式和随意的。
Suspense for Data Fetching仍处于试验阶段，将解决一些情况。
在其他情况下，您可以将异步结果建模为事件，以便您可以根据组件生命周期添加或删除侦听器。
或者您可以将异步结果建模为Observable，以便您可以根据组件生命周期订阅和取消订阅。
此处可以使用void 运算符。
代替：
React.useEffect(() => {
async function fetchData() {
}
fetchData();
}, []);
或者
React.useEffect(() => {
(async function fetchData() {
})()
}, []);
你可以写：
React.useEffect(() => {
void async function fetchData() {
}();
}, []);
它更干净，更漂亮。
异步效应可能会导致内存泄漏，因此在组件卸载时执行清理非常重要。在获取的情况下，这可能如下所示：
function App() {
const [ data, setData ] = React.useState([]);
React.useEffect(() => {
const abortController = new AbortController();
void async function fetchData() {
try {
const url = 'https://jsonplaceholder.typicode.com/todos/1';
const response = await fetch(url, { signal: abortController.signal });
setData(await response.json());
} catch (error) {
console.log('error', error);
}
}();
return () => {
abortController.abort(); // cancel pending fetch request on component unmount
};
}, []);
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
你也可以使用IIFE格式来保持简短
function Example() {
const [data, dataSet] = useState<any>(null)
useEffect(() => {
(async () => {
let response = await fetch('api/data')
response = await response.json()
dataSet(response);
})();
}, [])
return <div>{JSON.stringify(data)}</div>
}