Question

我想使用React挂钩来管理以下网站项目的状态：http://konekto.world

遵循以下教程之后：https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c

我想在

中写我的钩子

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”钩子：

App.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))

see whole error log here

非常感谢您的帮助！

React Hooks：useState给出错误：TypeError：undefined是不可迭代的（无法读取属性Symbol（Symbol.iterator）属性）

0 个答案: