类型错误:func.apply 不是函数 [英] TypeError: func.apply is not a function

问题描述

我正在尝试像这样使用 useEffect 函数:

 const [data, setData] = useState({ course: [] });useEffect(async() => {const 结果 = 等待 axios.get(http://example.com/api/v1/categories/");等待 setData(result.data);}, []);控制台日志(数据)；返回 (<div><div>{data.info1}</div><div>{data.info2}</div><div>{data.info3}</div><div>{data.info4}</div>

);

但是当我尝试使用 data 变量时，它有时会抛出此错误:

TypeError: func.apply 不是函数HTMLUnknownElement.callCallbackC:/asdasd/node_modules/react-dom/cjs/react-dom.development.js:188185 |window.event = windowEvent;186 |}187 |>188 |func.apply(上下文，funcArgs)；|^ 189 |didError = false;190 |}//创建一个全局错误事件处理程序.我们用它来捕捉价值191 |//被抛出.这个错误处理程序可能会触发更多

我不知道，我想念哪里.

解决方案

您只能将普通函数作为参数传递给 useEffect，而不能传递异步函数.为了在 useEffect 中使用异步等待，您可以将您的函数编写为 IIFE(立即调用函数表达式 - 您编写函数并立即调用它).

const [data, setData] = useState({ course: [] });useEffect(() => {(异步() => {const 结果 = 等待 axios.get(http://example.com/api/v1/categories/");设置数据(结果.数据)；})();}, []);控制台日志(数据)；返回 (<div><div>{data.info1}</div><div>{data.info2}</div><div>{data.info3}</div><div>{data.info4}</div>

);

或者你可以创建一个普通的命名异步函数，然后如下调用它，

const [data, setData] = useState({ course: [] });useEffect(() => {const getResult = async() =>{const 结果 = 等待 axios.get(http://example.com/api/v1/categories/");设置数据(结果.数据)；};获取结果()；}, []);...

I'm trying to use useEffect function like that:

    const [data, setData] = useState({ courses: [] });
    
    useEffect(async () => {
        const result = await axios.get(
            "http://example.com/api/v1/categories/"
        );
    
        await setData(result.data);
    }, []);
    
    console.log(data);

return (
    <div>
        <div>{data.info1}</div>
        <div>{data.info2}</div>
        <div>{data.info3}</div>
        <div>{data.info4}</div>
    </div>
);

But when I try to use data variable it sometimes throws this error:

TypeError: func.apply is not a function
HTMLUnknownElement.callCallback
C:/asdasd/node_modules/react-dom/cjs/react-dom.development.js:188
  185 |     window.event = windowEvent;
  186 |   }
  187 | 
> 188 |   func.apply(context, funcArgs);
      | ^  189 |   didError = false;
  190 | } // Create a global error event handler. We use this to capture the value
  191 | // that was thrown. It's possible that this error handler will fire more

I don't know, where do I miss.

解决方案

You can only pass a normal function as argument to useEffect, and not an async function. In order to use async await in useEffect, you can write your function as an IIFE (Immediately Invoked Function Expression - you write the function and call it immediately).

const [data, setData] = useState({ courses: [] });
    
useEffect(() => {
    (async () => {
        const result = await axios.get(
            "http://example.com/api/v1/categories/"
        );
        setData(result.data);
    })();
}, []);
    
console.log(data);

return (
    <div>
        <div>{data.info1}</div>
        <div>{data.info2}</div>
        <div>{data.info3}</div>
        <div>{data.info4}</div>
    </div>
);

Or you can just create a normal named async function and then call it as below,

const [data, setData] = useState({ courses: [] });
    
useEffect(() => {
    const getResult = async () => {
        const result = await axios.get(
            "http://example.com/api/v1/categories/"
        );
        setData(result.data);
    };

    getResult();
}, []);

.
.
.

这篇关于类型错误:func.apply 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！