尝试运行反应组件时出现错误 TypeError: Object(...)()[Symbol.iterator]().next().value is undefined答案

【问题标题】：An error TypeError: Object(...)()[Symbol.iterator]().next().value is undefined when try run a react component尝试运行反应组件时出现错误 TypeError: Object(...)()[Symbol.iterator]().next().value is undefined
【发布时间】：2020-12-17 02:09:06
【问题描述】：

一个错误 TypeError: Object(...)()Symbol.iterator.next().value 是在创建 statePovider 后尝试运行反应时未定义

import React, {createContext,useReducer,useContext} from 'react';

export const StateContext = createContext();

export const StateProvider = ({reducer, initialState,children}) =>(

    <StateContext.Provider value={useReducer(reducer,initialState)}>
        {children}
    </StateContext.Provider>    

    ); 

export const useStateValue = () => useContext(StateContext);

应用 C:/Users/Jokanola/Documents/Web Project/bettersociety/src/App.js:14

11 |
12 | 13 |函数应用程序（）{ 错误 14 | const [ { user }, dispatch] = useStateValue(); 15 | 16 |返回（ 17 |

此处显示的包含 App 的文件夹

import React from 'react';
    import './App.css';
    import Header from './Components/Header';
    import Sidebar from './Components/Sidebar';
    import Chat from './Components/Chat';
    import SignIn from './Components/SignIn.js';
    import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
    import {useStateValue} from './Components/stateProvider';
    
        function App() {
        const [ { user }, dispatch] = useStateValue();
        
          return(
            <div className="App">
                <Router>
                    {
                        !user? (
                        <SignIn />
                    ):(
                   <div>
                    <Header />
                       <div className="App_body">
                            <Sidebar /> 
                                <Switch>
                                    <Route path="/room/:roomId">
                                        <Chat />
                                    </Route>            
                                </Switch>
                         </div> 
                    </div>
                    )
                  }
                </Router>
            </div>
        
        
            )
        }
        
        export default App;

这是 index.js，如果我用 StateProvider 敲击应用程序组件

    import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {StateProvider} from './Components/stateProvider';
import reducer, { initialState } from './Components/reducer';

ReactDOM.render(
  <React.StrictMode>
      <StateProvider reducer={reducer} initalState={initialState}>
        <App /> 
      </StateProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

【问题讨论】：

你没有使用你的StateProvider
我在index.js中使用过，
所以请贴出来。
我已经发布了

标签： javascript reactjs redux

【解决方案1】：

const [ user] = useStateValue();

在 App.js 中

和

const [user,dispatch]=useStateValue();

在 signin.js 中

它会起作用的。

【讨论】：

【解决方案2】：

使用状态提供者包装 App 时初始状态的拼写错误。更正为initialState

【讨论】：