处理请求副作用的几种方法，您应该知道-DEV365 开发者社区

在React中，使用效应通常用于处理副作用，包括处理请求副作用。

但是，在处理请求时，使用异步/等待是常见的，但是将异步函数作为使用效率的第一个参数将导致错误。

这是因为使用效果期望返回空隙的函数，但异步函数返回承诺。

因此，有几种方法可以处理请求副作用而无需知道的错误。

1.使用异步函数表达式


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

useEffect(() => {
    const fetchData = async () => {
        const result = await fetch(
            'YOUR_URL_HERE'
        );
        setData(result.data);
    }
    fetchData();
}, []);

您还可以将函数表达式抽象到使用效果外的usecallback挂钩中，以便您可以在其他地方使用它：

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

// useCallback can accept an async function as its argument
const fetchData = useCallback(async () => {
    const result = await fetch(
        'YOUR_URL_HERE'
    );
    setData(result.data);
}, [])
useEffect(() => {
   fetchData()
}, [fetchData])

2.使用iife

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

useEffect(() => {
    (async () => {
        const result = await fetch(
            'YOUR_URL_HERE'
        );
        setData(result.data);
    })()
}, [])

3.使用Promise

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

useEffect(() => {
    fetch( 'YOUR_URL_HERE')
        .then(result => setData(result.data));
}, [])

4.使用功能声明

const [data, setData] = useState(null);
useEffect(() => {
    async function fetchData() {
        const result = await fetch(
            'YOUR_URL_HERE'
        );
        setData(result.data);
    }
    fetchData();
}, [])

另外，您可以将此功能声明抽象为使用效果外的用户回挂钩，以便您可以在其他地方使用它。

希望这些方式可以为您服务。：）