reactjs - React Hooks: useState 给出错误: TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
问题描述
我想使用 React hooks 管理以下网站项目的状态:http: //konekto.world
我想写信给我的钩子
FormPersonType.js 文件
import React, { createContext, useContext, useReducer } from 'react';
import { Grid, IconButton, Typography } from '@material-ui/core';
import ArrowForward from '@material-ui/icons/ArrowForward';
import { makeStyles } from '@material-ui/core/styles';
import RadioButtonGroup from './RadioButtonGroup';
import RadioButton from './RadioButton';
import { useStateValue, StatePersonType } from '../App';
const useStyles = makeStyles(theme => ({
container: {
alignItems: 'center',
// background: 'white',
border: 'black',
'border-width': 'medium',
'margin-top': '80px',
background: 'rgba(255, 255, 255, 0.8)',
'border-radius': '20px'
},
item: {
// background: 'red',
width: '100%',
//background: 'white',
'text-align': 'center',
'border-radius': '5px',
'margin-top': '10px'
}
}));
const FormPersonType = props => {
const classes = useStyles(); //React HOOK API => looks nice
const [{ theme }, dispatch] = useStateValue();
return (
<Grid
container
className={classes.container}
direction="column"
spacing={2}
>
<Grid item sm={12} className={classes.item}>
<Typography variant="h5">Are you affected yourself?</Typography>
{/* <Box className={classes.label}>A</Box> */}
</Grid>
<Grid item sm={12} className={classes.item}>
<RadioButtonGroup>
<RadioButton
name="type_person"
value="1"
label="Yes, I am affected"
onClick={() =>
dispatch({
type: 'MeAffected'
})
}
/>
<RadioButton
name="type_person"
value="2"
label="No, another person is affected"
/>
</RadioButtonGroup>
<Grid />
<Grid item sm={12} className={(classes.item, classes.forwardbutton)}>
<IconButton
edge="start"
// className={classes.forwardbutton}
color="black"
onClick={props.handleComponentType}
>
<ArrowForward />
</IconButton>
{/* <HorizontalNonLinearStepWithError />*/}
</Grid>
</Grid>
</Grid>
);
};
export default FormPersonType;
我在以下文件中创建了“StatePersonType”挂钩:
应用程序.js
import React, { createContext, useContext, useReducer } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LandingPage from './SOS/index';
import Settings from './Settings/index';
import EmergencyDetails from './EmergencyDetails/index';
import withRoot from './custom_theme/withRoot';
import EmergencySent from './EmergencySent';
import SummaryPage from './SummaryPage';
function App() {
return (
<Router>
<Route path="/" exact component={LandingPage} />
<Route path="/emergency_details/" component={EmergencyDetails} />
<Route path="/settings/" component={Settings} />
<Route path="/emergency_sent" component={EmergencySent} />
<Route path="/summary_page" component={SummaryPage} />
</Router>
);
}
//Managing States
export const StateContext = createContext();
export const StatePersonType = ({ reducer, initialState, children }) => (
<StateContext.Provider value={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);
export default withRoot(App);
当我运行它时,我收到以下错误消息:
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
非常感谢您的帮助!
解决方案
推荐阅读
- nuxt.js - Nuxt.js vuex 存储未持久化
- javascript - Firefox 附加组件:window.addEventListener("load", init) 未触发事件
- android - 录制时像GPay一样黑屏?
- influxdb - 获取 Influx 2 的测量列表
- javascript - 更新数字数组,使它们彼此之后
- python - spacy 用于检查翻译是否良好
- swift - 来自调度组通知内的函数的 Swift 返回值
- c++ - 将浮点数转换为双倍时精度损失
- javascript - 应用脚本工具:试图获取文件夹中的所有文件 URL
- python - Discord.py:如何在特定频道上打印最后一条消息?