React Hooks: useState выдает ошибку: TypeError: undefined не повторяется (не может прочитать свойство Symbol (Symbol.iterator)) - PullRequest
Новая
       13

React Hooks: useState выдает ошибку: TypeError: undefined не повторяется (не может прочитать свойство Symbol (Symbol.iterator))

0 голосов
/ 21 июня 2019

Я хочу управлять состояниями с помощью перехватчиков 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))

см. Весь журнал ошибок здесь

Большое спасибоза вашу помощь!

...