时间戳

首页 > 解决方案 > 未捕获的类型错误：将 useReducer 与 useContext 用于全局存储 React js 时，对象不可迭代

javascript - 未捕获的类型错误：将 useReducer 与 useContext 用于全局存储 React js 时，对象不可迭代

问题描述

我正在尝试使用钩子将 redux 存储替换为 action 和 reducer 我使用 createContext 创建了一个全局存储，并使用 useReducer 创建了一个全局 reducer，并尝试在下面的文件中使用全局状态对象和 useContext，这会引发错误。另外，我尝试过控制台记录其返回值useContext(Store)未定义。

import React, {useContext, useEffect} from 'react'
import {newAction} from './actions'
import Store from '../../utils/store'
const Home = ()=>{
    console.log(Store)
    const [appStore, dispatch] = useContext(Store)
    useEffect(()=>{
        
        dispatch(newAction())
        console.log(appStore)
    },[]) 
    return(<div>Hello there</div>)
}

export default Home

index.jsx:7 Uncaught TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) at Home (index.jsx:7) at renderWithHooks (react-dom.development.js:14803)在线获取错误const [appStore, dispatch] = useContext(Store)

我的App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/home';
import './styles/index.scss'
import {StoreProvider} from './utils/store'

function App() {
  return (
    <div className="App">
    <StoreProvider>
      <Home/>
    </StoreProvider>
    
    </div>
  );
}

export default App;

我的商店/index.js

import {createContext} from 'react'

const Store = createContext({});

export const StoreProvider = Store.Provider;

export default Store;

contextProvider.js

import React,{useReducer} from 'react';
import {ContextProvider} from './index'
import reducer from './combineReducer'

const initialState = { home:{} }

const StoreProvider = (props) =>{
    return <ContextProvider value={useReducer(reducer, initialState)}>
        {props.children}
    </ContextProvider>
}
export default StoreProvider

combineReducer.js

import homeReducer from '../../pages/home/reducer'
export default mainReducer = (initialState, action)=>{
    return({
        home: homeReducer(initialState.home, action)
    })
}

主页/reducer.js

import {NEW_ACTION} from './actions'
export default reducer = (state,action) =>{
    switch(action.type){
        case NEW_ACTION: return {...state, val:true}
        default: return state
    }
}

标签： javascriptreactjsreact-hooksuse-contextuse-reducer

解决方案

以下文件中的代码几乎没有错误：

  1. 在文件Store/index.js中将变量重命名StoreProvider为 ContextProvider我正在使用ContextProvider的未定义的变量。
  2. 在文件App.js中将导入行import {StoreProvider} from './utils/store'更改import StoreProvider from './utils/store/contextProvider'为提供程序写入 contextProvider 文件。

修复后的文件：

存储/index.js

import {createContext} from 'react'
const Store = createContext({});
export const ContextProvider = Store.Provider;
export default Store;

应用程序.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/home';
import './styles/index.scss'
import StoreProvider from './utils/store/contextProvider'
function App() {
  return (
    <div className="App">
    <StoreProvider>
      <Home/>
    </StoreProvider>
    </div>
  );
}
export default App;

推荐阅读