Question

我刚刚开始学习React Hooks。我有一个名为appContext.js的文件。里面有AppContext

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

我在哪里错了？

Answer 1

替换行

const [state, dispatch] = useContext(AppContext);

到

const { state, dispatch }  = useContext(AppContext);

由于useContext返回的对象具有字段state和dispatch-不是数组

Answer 2

很抱歉在这么长时间后重新审视这个问题，但我之前遇到过这个问题，上面提供的 {state, dispatch} 格式对我不起作用。不过我有办法！编译器显示错误位于您的组件中，但问题的根源实际上可能是您在渲染时没有将该组件包装在 Store provider 中。这是我遇到这个问题的代码。

这是我的组件文件的相关部分

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 文件中进行了此设置。商店提供程序并未包装所有需要使用 Context 状态的组件。

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

错误信息如下：

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('')

为了修复它，我简单地移动了包装器，以便它包装将使用上下文提供的状态的每个组件。

app.js（更正）

  return (
    <div>
      <Store>    // Now Store wraps every component that will use it's state.
        <header>
        <TitleSearchForm />
        </header>
        <main>
            <Menu />
        </main>
      </Store>
    </div>
  )
}

就是这样！我已经有几次出现这个错误了，这两次都是我的问题。我希望这可以帮助那里的人！

TypeError：对象不是函数吗？

2 个答案: