Javascript TypeError:对象不是函数?
我刚开始学钩子。 我有一个名为appContext.js.的文件,里面有appContextJavascript TypeError:对象不是函数?,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我刚开始学钩子。 我有一个名为appContext.js.的文件,里面有appContext const AppContext = React.createContext(initialState); 我想在checkInfo.js文件中使用它 const CheckInfo = (props) => { const [state, dispatch] = useContext(AppContext); useEffect(() => { v
const AppContext = React.createContext(initialState);
我想在checkInfo.js文件中使用它
const CheckInfo = (props) => {
const [state, dispatch] = useContext(AppContext);
useEffect(() => {
var personData = {};
async function fetchData() {
dispatch({
type: "isLoding",
payload: true,
});
}
////other code
}
但我有
TypeError: Object is not a function
我哪里错了?更换线路
const [state, dispatch] = useContext(AppContext);
到
由于
useContext
返回一个带有字段state
和dispatch
的对象-不是一个数组很抱歉在这么长的时间后再次访问这个问题,但是我以前遇到过这个问题,而且上面提供的{state,dispatch}格式对我不起作用。不过我有一个解决办法!编译器显示错误位于组件中,但问题的根源实际上可能是您在渲染组件时没有在存储提供程序中包装该组件。这是我遇到这个问题的代码这是我的组件文件的相关部分 title.js:
import React, { useState, useContext, useEffect } from 'react'
import { Context } from './state/store'
export default function TitleSearchForm () {
const [state, dispatch] = useContext(Context)
为了重现错误,我在app.js文件中设置了此设置。存储提供程序没有包装所有需要使用上下文状态的组件
app.js:
import React from 'react'
import TitleSearchForm from './components/titleSearch'
import Menu from './components/menu'
import Store from './components/state/store'
import './App.css'
function App () {
return (
<div>
<header>
<TitleSearchForm />
</header>
<main>
<Store> // This doesn't wrap TitleSearchForm
<Menu />
</Store>
</main>
</div>
)
}
为了修复它,我只是移动了包装器,以便它包装将使用上下文提供的状态的每个组件app.js(已更正)
返回(
//现在,Store包装将使用其状态的每个组件。
)
}
就这样!我已经有好几次出现这个错误了,这两次都是我的问题。我希望这能帮助别人 该错误具体指的是哪一行…?请给出一个可重复的示例:,我们如何猜测您的
AppContext
的外观♦ .. const[state,dispatch]=useContext(AppContext);我这样做了,但是我有一个TypeError:dispatch不是一个函数
import React from 'react'
import TitleSearchForm from './components/titleSearch'
import Menu from './components/menu'
import Store from './components/state/store'
import './App.css'
function App () {
return (
<div>
<header>
<TitleSearchForm />
</header>
<main>
<Store> // This doesn't wrap TitleSearchForm
<Menu />
</Store>
</main>
</div>
)
}
TypeError: Object is not a function
TitleSearchForm
src/components/titleSearch.js:7
4 | import { Context } from './state/store'
5 |
6 | export default function TitleSearchForm () {
> 7 | const [state, dispatch] = useContext(Context)
8 | const [title, setTitle] = useState('')
9 | const [id, setId] = useState('')
10 | const [year, setYear] = useState('')
return (
<div>
<Store> // Now Store wraps every component that will use it's state.
<header>
<TitleSearchForm />
</header>
<main>
<Menu />
</main>
</Store>
</div>
)
}