React useEffect引发“create is not a function”错误
React useEffect是React中的一个钩子函数，用于处理副作用操作。副作用操作是指在组件渲染过程中，需要执行的一些额外操作，例如数据获取、订阅事件、手动操作DOM等。
当使用React useEffect时，可能会遇到"create is not a function"错误。这个错误通常是因为在useEffect的回调函数中，调用了一个未定义的函数create。
要解决这个错误，可以按照以下步骤进行排查和修复：
- 确保create函数已经正确定义：检查代码中是否存在名为create的函数，并确保其正确定义和导入。
- 检查函数命名冲突：如果代码中存在多个同名的create函数，可能会导致命名冲突。可以尝试修改函数名称，避免冲突。
- 检查函数作用域：确保create函数在useEffect的回调函数内部可见。如果create函数是在回调函数外部定义的，可以考虑将其移动到回调函数内部，或者使用useCallback来确保函数引用的稳定性。
- 检查函数调用方式：确保在调用create函数时使用了正确的语法和参数。如果create是一个类的构造函数，需要使用new关键字进行实例化。
- 检查依赖项数组：在useEffect的第二个参数中，可以传入一个依赖项数组，用于控制副作用操作的触发时机。如果依赖项数组中包含了create函数，可能会导致循环调用或其他问题。可以尝试将create函数从依赖项数组中移除，或者重新评估其是否真正需要作为依赖项。
总结起来，当React useEffect引发"create is not a function"错误时，需要检查create函数的定义、命名冲突、作用域、调用方式以及依赖项数组等相关因素，以找到并修复问题。
相关·内容
我使用useState从API更新响应。
然后，我将获取所需的数据，并将它们映射到一个新的数组(arr)中。
在上述步骤之后，我将更新"setData“useState挂钩以使用”数据“状态。
但是它给了我错误的“无效钩子调用”。钩子只能在函数组件"“的主体内调用。
下面是我所面临的问题代码的一部分
import {useEffect, useState} from 'react'
import logo from './logo.svg';
import './App.css
浏览 1提问于2022-06-25得票数 1
回答已采纳
我正在使用react-router-dom 5.2.0，当用户不小心设置错误或无效的404 page时，我试图构建一个404 page。
问题
404页在每个路由中呈现。不知道我在这里错过了什么。
router.js
import React, { useEffect } from "react";
import { Route, Switch, useLocation, withRouter } from "react-router-dom";
import Home from "./Pages/home";
import SearchProd
浏览 4提问于2021-07-11得票数 1
回答已采纳
在中，我们发现下面的代码使用useEffect钩子更新document.title
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked
浏览 15提问于2022-06-25得票数 1
在我的项目中，我经历了上述错误。
错误解释：
此错误位于：
in Container
in ProductContainer (created by App)
in RCTView (created by View)
in View (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppC
浏览 13提问于2022-03-12得票数 1
我有以下React Native模块： import React, {useContext, useEffect} from 'react';
import {Image, StyleSheet} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import AuthContext from '../context/auth/authContext';
const Intro = () => {
浏览 254提问于2020-09-09得票数 2
我试图从API中获取数据，然后从另一个钩子组件中使用它。
但我有个错误
这是我的App.js
import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
import MainRouter from "./core/MainRouter";
import {MovieProvider} from "./context/MovieContext";
import a
浏览 2提问于2020-04-26得票数 0
回答已采纳
1回答
我对使用CodeSandbox的React有问题。
我的基本例子：
App.js
import React, { useEffect, useContext } from "react";
import { FirmsContext } from "./FirmsContext";
export default function App() {
const { firms, fetchFirms } = useContext(FirmsContext);
useEffect(() => {
(async function getFirms()
浏览 1提问于2020-08-12得票数 0
回答已采纳
我是新来的反应本地人。我试图创建一个简单的搜索餐厅与Yelp。不幸的是，我得到了一个错误：
"searchApi“不是函数。(在‘searchApi(术语)’中，'searchApi‘是"")
在我的代码下面。
useResults.js
import React, { useEffect, useState } from 'react';
import yelp from '../api/yelp';
export default () => {
const [result, setResult] = use
浏览 2提问于2021-10-07得票数 0
我正在创建一个提交表单，并在这里使用useEffect()。
useEffect从后端接收到一个400-Statuscode和一个错误消息，我想在我的提交表单上显示这个错误，但是我很难在'useEffect(()=>{}‘-范围之外访问这个错误。
这是我的代码(我正在使用react-bootstrap和@redux-toolkid)：
简短版本：
var error = null
useEffect(() => {
console.log('useEffect(): ')
console.log(createResult)
if (createResult
浏览 5提问于2022-07-16得票数 0
1回答
我遵循了一些教程，一切都在为这个家伙工作，但对我却没有用。我使用axios尝试获取一些简单的数据，但是在控制台中我得到了一个无法读取属性的错误，它没有获取和显示数据。
我认为我的设置是相当基本的，所以我真的想知道我在这里做错了什么。我的PHPStorm没有标记任何字体，所以我不确定我是否做得对。
以下是我的DataFetching.js代码：
import React, {useState, useEffect} from "react";
import axios from "axios";
function DataFetching(){
cons
浏览 5提问于2022-09-14得票数 -2
我得到了以下错误：
React钩子"useEffect“在函数”useEffect“中被称为”useEffect“，它既不是React函数组件，也不是自定义的React函数react hooks/rules of hooks。
我不知道我的代码中到底是什么错误：
import React, {useState, useEffect} from 'react';
import "../App.css"
function shoes() {
useEffect(() => {
fetchItems();
}, []);
浏览 5提问于2020-03-23得票数 14
回答已采纳
我知道闭包是如何工作的，但我无法理解在没有详尽的依赖关系数组的情况下，陈旧的闭包是如何在React的useEffect中创建的。为此，我试图复制一个陈旧的闭包，就像React的useEffect一样，而不使用useEffect，但我无法创建它。我的代码不会创建过时的闭包，而是在每个间隔上记录一个正确的值。请你看看下面的片段，告诉我：
我做错什么了？当我们没有提供完整的依赖数组时，我应该做些什么来创建一个陈旧的闭包，比如我们在React的useEffect中得到的闭包？(参考代码在文章末尾)
--为什么在useEffect中没有给出详尽的依赖时，就会创建陈旧的闭包？为什么useEffect钩子回
浏览 1提问于2021-07-27得票数 5
回答已采纳
index.tsx
import useUser from '@services/users';
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
function App() {
const { t } = useTranslation();
const { getAll } = useUser();
const [ rowDa
浏览 0提问于2021-04-06得票数 1
2回答
我做的事情如下
()
const LowerCard = (props) => {
let { review_meta, step } = props
const [component, setComponent] = useState('');
const {state, editDispatch} = useContext(ReviewMetaEditCardDispatch);
useEffect(() => {
// https://stackoverflow.com/a/57847874/433570
浏览 4提问于2020-03-19得票数 2
回答已采纳
我正在尝试将TypeScript接口类型添加到我要输入的JSON数据中。我目前正在收到与我的MachineDetail.tsx文件有关的以下错误：
Property 'data' does not exist on type 'APIContextInterface | null'.
MachineDetail.tsx (下面的行是它抛出错误的位置)
const { data, isLoading } = useContext(APIContext);
apiContext.tsx (我在这里提取API数据并将其存储在上下文中)
我的TypeScript接口和我
浏览 6提问于2021-07-14得票数 0
回答已采纳
当GetCreatorLicense()被禁用时，程序运行得很好，我试图在循环外设置数据，但仍然得到“错误:重新渲染太多。React限制渲染次数以防止无限循环”。错误，然后我把这个函数放在useEffect下，我只是得到控制台的输出，但是useState没有改变
const Getdata = async () => {
let grabbedData = [];
await firebase
.database()
.ref(`/users`)
浏览 0提问于2020-12-15得票数 0
我的代码中有无效的钩子错误：
import React, { useState, useEffect } from 'react'
import { useLocation, useHistory, Link } from 'react-router-dom'
import $ from 'jquery'
import '../stylesheet/pages/pages.landing.css'
import '../stylesheet/global.css'
export default function
浏览 0提问于2020-11-11得票数 0
回答已采纳
我收到了这些小错误
./components/create-nft/InstagramSelector.js
39:15 Warning: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
useEffect(() => {
async function fetchData() {
// You can await here
const response = await MyAPI.getData(someId);
// .
浏览 2提问于2022-05-06得票数 1
1回答
我有一个redux State HOC来管理连接 当我向商店添加新帖子时，我遇到问题 import React, { useEffect } from "react";
import { connect } from "react-redux";
export default function withState(WrappedComponent) {
function mapStateToProps(reduxState) {
let state = {};
for(let t of Object.entries(reduxState)
浏览 12提问于2021-03-28得票数 1
我创建了一个定制的useFetch()钩子，这样我的代码就可以更动态、更少重复。问题是我无法在App.js中显示我的数据。
我知道这些错误：
无法读取未定义的属性(读取“映射”)。
an :67警告:不能对未挂载的组件执行React状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消useEffect清理函数中的所有订阅和异步任务。
我做了一个console.log(类型)来查看我的自定义钩子中是否有任何错误，但是它工作得很好，记录了所有类型。当我试图使用map方法显示数据时，问题就会产生。
CodeSandbox
useFetch.js
import {
浏览 5提问于2022-03-29得票数 1
回答已采纳
1回答
React编译失败
、、、
我刚开始反应，在尝试用axios获取api数据时，编译错误失败了。
Axios.js：
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://localhost:8001'
})
export default instance;
Cards.js：
import React, { useState, useEffect } from 'react'
import "./Cards.css"
import TinderCard
浏览 3提问于2021-07-14得票数 0
回答已采纳
我在使用滑块组件。
在我的样本程序中。Slider.create在useEffect()中被调用
export default function SectionBasics() {
React.useEffect(() => {
if (
!document
.getElementById("sliderRegular")
.classList.contains("noUi-target")
) {
Slider.create(document.getElementById(
浏览 0提问于2021-01-15得票数 0
回答已采纳
我用的是世博会5.0.1。我有一个很好的API。
这是我的整个App.js：
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
const [data, setData] = useState([{title: "First title"}]);
useEffect(() => {
fetch('http://192.168.1.68:
浏览 4提问于2021-12-23得票数 0
回答已采纳
只是一个新手的问题，我想知道我该怎么做才能使工作成为我在useEffect上遇到的错误
第15:6行: React缺少一个依赖项：‘刷新锁定’。要么包含它，要么删除依赖数组react/react。
import { useState, useEffect } from "react";
function App() {
const { time, setTime } = useState(new Date());
function refreshClock() {
setTime(new Date());
}
useEffect(() =>
浏览 15提问于2022-08-12得票数 0
回答已采纳
1回答
你好，我正在尝试在Gatsby中使用chart js。我目前正在学习在react中使用chart js的教程，我不确定问题是不是他使用的是creat-react-app，而不是Gatsby，但错误似乎并没有表明这一点。 首先，我安装了以下软件： npm i --save react-chartjs-2 然后 npm i --save chart.js chartData.js： import React, {useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
浏览 13提问于2020-06-19得票数 0
回答已采纳
早上好!
我正在启动react钩子，但是当我想要使用useEffect时，它抛出了以下错误：
Line 4:5: React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
代码如下：
profile.js
import React, { useEffect } from 'react';
浏览 2提问于2020-09-26得票数 2
import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
function AppTwo(props){
const [state, setState] = React.useState("initial value");
useEffect(() => {
console.log(`useE
浏览 7提问于2022-01-17得票数 1
回答已采纳
我需要用useEffect React钩子实现异步/等待。我试过很多方法。每次我遇到一个错误:钩子只能在函数组件的主体内被调用。
import React, { useEffect } from 'react'
import { ActivityIndicator, StatusBar, StyleSheet, View } from 'react-native'
import * as Keychain from 'react-native-keychain'
import useEffectAsync from '../utils&#
浏览 40提问于2019-07-11得票数 2
回答已采纳
axios代码：
import Axios from "axios";
export const getBlogPosts = async (setter) => {
try {
const res = await Axios.get(`https://jsonplaceholder.typicode.com/posts/1`);
if (res.status === 200 && res?.data) {
setter(res?.data);
}
} catch (error) {
console.l
浏览 11提问于2022-03-24得票数 0
我试图在地图上画一个圆圈(在地图中间有一个标记)。然而，我的地图上什么也没有出现。我尝试过各种ScatterplotLayer选项，尝试切换位置，也尝试了getPosition：(d) => [d.coordinates，d.coordinates1]等等，但是地图上什么也没有出现。
import React, { useState, useEffect, createRef } from 'react';
import MapGL, { Marker, NavigationControl, FlyToInterpolator } from "react-map-
浏览 0提问于2020-05-16得票数 0
回答已采纳
在我的反应本机项目中，我经历了上述错误。
我的App.js文件：
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
//Screens
import Header from './Shared/Header'
import ProductContainer from './Screens/Products/Pro
浏览 6提问于2022-03-12得票数 0
1回答
尝试实现一个来自react示例的自定义钩子：，但我得到了以下错误：
错误：
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of
浏览 3提问于2019-03-27得票数 6
回答已采纳
3回答
ExceptionsManager.js:179错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，可能有多个React副本。
在Playbutton组件中获取此错误
Playbutton.js
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "
浏览 8提问于2022-03-14得票数 0
我很熟悉react，我发现使用useEffect真的很容易，thunk很难处理，我可以只使用useEffect & axios而不使用createAsyncThunk将结果发送到商店吗？在useEffect上使用它有什么主要的性能好处吗？
createAsyncThunk：
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'
// First, create the thunk
const fetchUs
浏览 1提问于2021-04-11得票数 10
回答已采纳
我收到这样的警告：
React dom.Development.js:86警告:无法对尚未挂载的组件执行React状态更新。这表示呈现函数有副作用，稍后异步调用将尝试更新组件。将此工作移至useEffect。
和
未定义的TypeError:无法读取未定义的属性(读取“审阅”)
setReviews也不适用于我的axios函数。
import React, { useState } from "react";
import axios from "axios";
function GetRandomReview(props) {
const [
浏览 3提问于2022-10-31得票数 0
回答已采纳
我正在制作一个电影应用程序克隆，但我得到了这个错误：
“未处理的运行时错误TypeError:无法读取未定义的属性(读取‘长度’)”
import Image from 'next/image'
import { useEffect, useState } from 'react'
import { baseUrl } from '../constants/movie'
import { Movie } from '../typing'
interface Props {
netflixOriginals: Mov
浏览 21提问于2022-07-12得票数 0
我正在查看react中有关的文档，因为我在js中得到了这个错误。我试图像文档显示那样修改我的代码，但是我觉得我遗漏了什么，因为我仍然会遇到同样的错误。我将在尝试之前和之后发布我的代码。谢谢。
warning React Hook useEffect has a missing dependency: 'handleDocumentScrollThrottled'. Either include it or remove the dependency array react-hooks/exhaustive-deps
尝试修复之前的代码
/* Completed useDoc
浏览 2提问于2019-12-16得票数 0
回答已采纳
我使用的是create-react-app和一些外部模块，比如react-markdown。我如何“要求”一个动态生成的文件名？我有数以千计的markdown文件，我需要动态加载它们。如果我提供一个静态路径，我的组件工作得很好，但是当我尝试连接这个路径时就不能工作了。我不能静态导入，因为文件太多。
示例：
import React, { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown/with-html"
const MarkdownServer = (
浏览 22提问于2019-11-06得票数 0
所以我得到了dispatcher.useEffect is not a function
react.development.js:1463 Uncaught TypeError: dispatcher.useEffect is not a function
at useEffect (react.development.js:1463)
at Preload (VM75697 Preload.js:40)
at ProxyFacade (react-hot-loader.development.js:677)
at mountIndeterminateComponent (react-dom
浏览 1提问于2018-11-23得票数 1
回答已采纳
1回答
工作的反应-本机第一次和使用密钥链登录页面，我得到了这个问题。
import React, { useEffect, useState } from "react";
import { StyleSheet, Text, TextInput, View, Dimensions } from "react-native";
import * as Keychain from "react-native-keychain";
export default function App() {
const [isLoggedIn, setIsLogg
浏览 11提问于2022-04-08得票数 0
我有一个使用如下钩子的React组件： const myComponent = (props) => {
useEffect(() => {
FetchData()
.then(data => {
setState({data: data});
}
// some other code
}, []);
//some other code and render method...
} fetchData负责使用axios并从API获取数据： const FetchData = async () => {
浏览 28提问于2019-11-25得票数 0
我有这样的组成部分：
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You c
浏览 8提问于2018-10-27得票数 62
回答已采纳
我已经遵循了指南，但在这方面我还是个新手。我已经创建了一个基本的react.js应用程序，并安装了uevent、three和照片球体查看器作为。然后，我使用中的代码来显示360全景视图。
我得到了这个错误。
TypeError: photo_sphere_viewer__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function
(anonymous function)
src/App.js:9
6 | const { src } = props;
7 |
8 | useEffect(() => {
>
浏览 8提问于2020-05-29得票数 1
1回答
我的应用程序中有些部分必须同步工作。我用的是作架。问题是祖站的setState函数是异步工作的。请告诉我是否还有其他库支持同步状态更改或任何技巧。
App.js (react示例)
// in real
import create from 'zustand'
import logo from './logo.svg';
import React, { useEffect } from 'react';
const useStore = create(() => ({
counter: 0
}))
function App() {
浏览 5提问于2022-05-18得票数 0
我有一个函数通过存储中的Axios获取数据：
import create from 'zustand'
import axios from "axios";
export const useStore = create((set) => ({
pokemons: [],
eachPokemon: {},
getPokemons: async () => {
const response = await axios.get('https://pokeapi.co/api/v2/pokemon')
浏览 4提问于2022-08-06得票数 0
我正在使用原生react来构建一个身份验证应用程序，但是我不能忽略这个错误 如何摆脱这个错误？ 错误:没有创建Firebase应用程序'DEFAULT‘-调用firebase.initializeApp() 我是按照reactnative firebase文档中的说明操作的。 https://rnfirebase.io/auth/usage 这是我的app.js import React, {useState, useEffect }from 'react';
import {StyleSheet,View,Text,} from 'react-native&
浏览 17提问于2020-07-11得票数 0
下面的错误有时会发生，我不知道为什么。似乎每一段代码都正常工作，但只有一个错误发生。
React "useEffect“不能在回调中调用。必须在或自定义React函数-钩子/钩子规则中调用React，以搜索关键字以了解每个错误的更多信息。
import { useEffect, useState } from 'react'
import { useAuthContext } from 'src/contexts/Auth'
import { brandRepository } from 'src/repositories/BrandRe
浏览 12提问于2022-04-17得票数 2
回答已采纳
Lottiefiles有一个lottie交互式指南，其中显示了一切如何工作，但尽管尝试了一堆东西，我还是无法让它在react上工作。这就是我到目前为止所拥有的。这是lottie互动页面：https://lottiefiles.com/interactivity import React, { useEffect, useState, useRef } from "react";
import "./styles.css";
import "@lottiefiles/lottie-player";
import { create } from &
浏览 64提问于2021-11-19得票数 0
2回答
我的组件看起来如下：
import axios from "axios";
import React, { useState, useEffect } from "react";
import { Link } from 'react-router-dom'
import User from "./User";
const Users = () => {
const [users, setUsers] = useState([])
useEffect(() => {
axios(&
浏览 6提问于2022-02-05得票数 0
回答已采纳
我有一个函数，每次名称状态改变时都会调用该函数。我想把这个更改后的值发送给父组件，但它指出了这个错误：
React Hook "useEffect" is called in function "handleNameChange" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
代码：
export default function config({ me, setMePut }) {
co
浏览 0提问于2020-04-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
