类型错误：func.apply 不是函数

IT技术 javascript reactjs axios use-effect
2021-05-10 17:37:35

我正在尝试使用这样的 useEffect 函数：

    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>
);

但是当我尝试使用data变量时，它有时会引发此错误：

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

我不知道，我在哪里想念。

4个回答

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

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>
);

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

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

    getResult();
}, []);

.
.
.

这表明您正在从 useEffect 返回一个不是函数的值。查看您共享的代码，您经常使用带有 useEffect 的异步函数，这是不受支持的，并且会触发此错误。

你能提供更多的代码，所以我能理解你在做什么！

请不要在 useEffect 中使用 async await、{} 和 []。帮我解决

useEffect(() => {
    props.actions.something();
}, [])

如果你有使用

useEffect(async () => 
  await props.actions.something();
)

您可以单独编写一个异步函数，然后从内部调用它

其它你可能感兴趣的问题
上一篇使用 Ultimaker 2 移动长打印 下一篇将项目数据传递给react模式