Ошибка: неверный вызов ловушки. Но не могу понять где. Реагировать JS - PullRequest
Новая
       4

Ошибка: неверный вызов ловушки. Но не могу понять где. Реагировать JS

0 голосов
/ 29 мая 2020

Это мой первый раз, когда я реагирую, и я пытаюсь создать форму регистрации с шагами. Я прочитал документацию по material-ui и по поводу ReactJS, но не могу понять, где я делаю ошибки.

Я вставляю ошибку: «Ошибка: недопустимый вызов ловушки. Перехватчики могут только вызываться внутри тела функционального компонента. Это может произойти по одной из следующих причин: 1. Возможно, у вас несовпадающие версии React и средства визуализации (например, React DOM) 2. Возможно, вы нарушаете правила хуков 3 . У вас может быть более одной копии React в одном приложении. См. Ссылку для советов по отладке и устранению этой проблемы. "

Я думаю, что ошибка в этих двух классах, но может ' Не понимаю, почему и где.

FormUtentiPersonali. js

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';


    const useStyles=makeStyles((theme)=>({
        root: {
            '& .MuiTextField-root': {
              margin: theme.spacing(1),
              width: '25ch',
            },
        },
    }));


export class FormUtentiPersonali extends Component {
    continue = e =>{
        e.preventDefault();
        this.props.nextStep();
    };
    back = e =>{
        e.preventDefault();
        this.props.prevStep();
    };
    render() {
        //const classes = useStyles();
        const {values,handleChange}=this.props;
        return (
            <form noValidate autoComplete="off">
                <TextField 
                required 
                id="email-utente" 
                label="E-mail" 
                defaultValue={values.email}
                onChange={handleChange('email')}
                 />
                 <br/>
                 <TextField 
                required 
                id="password-utente" 
                label="Imposta password" 
                defaultValue={values.password}
                onChange={handleChange('password')}
                type="password"
                 />
                 <br/>
                 <TextField 
                required 
                id="conferma-password-utente" 
                label="Conferma password" 
                defaultValue={values.confermaPassword}
                onChange={handleChange('confermaPassword')}
                type="password"
                 />
                 <Button
                        label="Indietro"
                        variant="contained"
                        onClick={this.back}
                    >
                        Indietro
                        </Button>
                        &nbsp;&nbsp;&nbsp;
                    <Button
                        label="Continua"
                        color="secondary"
                        variant="contained"
                        onClick={this.continue}
                    >
                        Continua
                        </Button>
            </form>
        );
    }
}

export default FormUtentiPersonali;

FormUtentiAnagrafica. js

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import Button from '@material-ui/core/Button';


    const useStyles=makeStyles((theme)=>({
        root: {
            '& .MuiTextField-root': {
              margin: theme.spacing(1),
              width: '25ch',
            },
        },
    }));



export class FormUtenteAnagrafica extends Component {
    continue = e =>{
        e.preventDefault();
        this.props.nextStep();
    };

    render() {
        const giorni=[
            {
                value:'01',
                label:'01',
            },
            {
                value:'02',
                label:'02',
            },
            {
                value:'03',
                label:'03',
            },
            {
                value:'04',
                label:'04',
            },
            {
                value:'05',
                label:'05',
            },
            {
                value:'06',
                label:'06',
            },
            {
                value:'07',
                label:'07',
            },
            {
                value:'08',
                label:'08',
            },
            {
                value:'09',
                label:'09',
            },
            {
                value:'10',
                label:'10',
            },
            {
                value:'11',
                label:'11',
            },
            {
                value:'12',
                label:'12',
            },
            {
                value:'13',
                label:'13',
            },
            {
                value:'14',
                label:'14',
            },
            {
                value:'15',
                label:'15',
            },
            {
                value:'16',
                label:'16',
            },
            {
                value:'17',
                label:'17',
            },
            {
                value:'18',
                label:'18',
            },
            {
                value:'19',
                label:'19',
            },
            {
                value:'20',
                label:'20',
            },
            {
                value:'21',
                label:'21',
            },
            {
                value:'22',
                label:'22',
            },
            {
                value:'23',
                label:'23',
            },
            {
                value:'24',
                label:'24',
            },
            {
                value:'25',
                label:'25',
            },
            {
                value:'26',
                label:'26',
            },
            {
                value:'27',
                label:'27',
            },
            {
                value:'28',
                label:'28',
            },
            {
                value:'29',
                label:'29',
            },
            {
                value:'30',
                label:'30',
            },
            {
                value:'31',
                label:'31',
            },
        ];
        const mesi=[
            {
                value: 'Gen',
                label: 'Gen',
            },
            {
                value: 'Feb',
                label: 'Feb',
            },
            {
                value: 'Mar',
                label: 'Mar',
            },
            {
                value: 'Apr',
                label: 'Apr',
            },
            {
                value: 'Mag',
                label: 'Mag',
            },
            {
                value: 'Giu',
                label: 'Giu',
            },
            {
                value: 'Lug',
                label: 'Lug',
            },
            {
                value: 'Ago',
                label: 'Ago',
            },
            {
                value: 'Set',
                label: 'Set',
            },
            {
                value: 'Ott',
                label: 'Ott',
            },
            {
                value: 'Nov',
                label: 'Nov',
            },
            {
                value: 'Dic',
                label: 'Dic',
            },
        ]

        const {values,handleChange}=this.props;
        //const classes=useStyles();
        const [giorno,setGiorno]=React.useState('01');
        const [mese,setMese]=React.useState('Gen');
        const cambiaGiorno=event=>{
            setGiorno(event.target.value);
        };
        const cambiaMese=event=>{
            setMese(event.target.value);
        }
        return (
            <form noValidate autoComplete="off">
                <TextField
                required
                id="nome-utente"
                label="Inserisci nome"
                onChange={handleChange('nome')}
                defaultValue={values.nome}
                />
                <br/>
                <TextField
                required
                id="cognnome-utente"
                label="Inserisci cognome"
                onChange={handleChange('cognome')}
                defaultValue={values.cognome}
                />
                <br/>
                <TextField
                required
                id="numero-telefono-utente"
                label="Numero di telefono"
                onChange={handleChange('numeroDiTelefono')}
                defaultValue={values.numeroDiTelefono}
                />
                <br/>
                <TextField
                required
                id="giorno-nascita-utente"
                label="Giorno di nascita"
                value={giorno}
                onChange={handleChange('birthdayDay')}
                onChange={cambiaGiorno}
                >
                {giorni.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
          </TextField>
          &nbsp;&nbsp;
          <TextField
                required
                id="mese-nascita-utente"
                label="Mese di nascita"
                value={mese}
                onChange={handleChange('birthdayMonth')}
                onChange={cambiaMese}
                >
                {mesi.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
          </TextField>
          <br/>
          <TextField
          id="anno-nascita-utente"
          label="Anno di nascita"
          type="number"
          InputLabelProps={{
            shrink: true,
          }}
          onChange={handleChange('birthdayYear')}
          defaultValue={values.birthdayYear}
        />
        <br/>
        <Button
            label="Continua"
            color="secondary"
            variant="contained"
            onClick={this.continue}
        >
            Continua
        </Button>
        </form>
        );
    }
}

export default FormUtenteAnagrafica;

Ответы [ 2 ]

0 голосов
/ 29 мая 2020

Добро пожаловать в React!

Некоторые вещи, которые сразу же пришли мне в голову.

Перехватчики React, такие как useState, не могут использоваться в компонентах класса, вам придется использовать функциональный компонент. Это потому, что обычный способ манипулирования состоянием в классе - это определение конструктора и объявление объекта состояния следующим образом: 

export default class App extends component {
 constructor(){
  props(){
   this.state = {
    //declare state items here
   }
  }

  render() {
   //render state and html here
   this.setState({}) //to update properties on the state
  }
 }

}

Как я уже сказал, если вы хотите используйте хуки, вы должны определить функциональный компонент и импортировать useState из реакции. 

import React, { useState } from 'react'
function App() {
 const [value, setValue] = useState('')
 return(
  //return things here
 )
}

Я бы порекомендовал посмотреть документацию о хуках здесь: https://reactjs.org/docs/hooks-intro.html

Надеюсь, это поможет :)

0 голосов
/ 29 мая 2020

useState - это перехватчик React, который запланирован для функциональных компонентов, и вы создаете Class компоненты, поэтому вы можете определить свое состояние где-нибудь, например, методом constructor. например: 

class MyComponent extends React.Component {
   constructor() {
     super();

     this.state = {
       myVar1: myValue,
       myVar2: {id:1, title:'foo'}
     }
   }
   // ...
}

Затем вы можете изменить свои переменные, используя метод setState, который наследуется от класса Component следующим образом: 

  <Button onClick={()=>this.setState({myVar: 'myValue'})} />

Пожалуйста, сначала изучите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...