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

Posted 2023-02-22

【中文标题】尝试运行反应组件时出现错误 TypeError: Object(...)()[Symbol.iterator]().next().value is undefined

【英文标题】：An error TypeError: Object(...)()[Symbol.iterator]().next().value is undefined when try run a react component

【发布时间】：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中使用过，

所以请贴出来。

我已经发布了

【参考方案1】：

const [ user] = useStateValue();

在 App.js 中

和

const [user,dispatch]=useStateValue(); 

在 signin.js 中

它会起作用的。

【参考方案2】：

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