Почему в методе handleShange ReactJS Component неопределенная ошибка setState? - PullRequest
Новая
       32

Почему в методе handleShange ReactJS Component неопределенная ошибка setState?

0 голосов
/ 01 апреля 2020

вот простая страница профиля пользователя ReactJS + Reactstrap + Axe ios

Я получаю сообщение об ошибке при использовании setState в методе handleChange.

Я попробовал несколько способов установить состояние, но ничего не поделать. Это может быть более серьезной проблемой ... или связано с JSON синтаксическим анализом и stringify.

Отображение формы работает правильно.

Стек ошибок: 

 user-form.js?c7a5:69 Uncaught TypeError: Cannot read property 'setState' of undefined
    at handleChange (user-form.js?c7a5:69)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
    at invokeGuardedCallback (react-dom.development.js?61bb:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:306)
    at executeDispatch (react-dom.development.js?61bb:389)
    at executeDispatchesInOrder (react-dom.development.js?61bb:414)
    at executeDispatchesAndRelease (react-dom.development.js?61bb:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js?61bb:3287)
    at Array.forEach (<anonymous>)
handleChange @ user-form.js?c7a5:69
callCallback @ react-dom.development.js?61bb:188
invokeGuardedCallbackDev @ react-dom.development.js?61bb:237
invokeGuardedCallback @ react-dom.development.js?61bb:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js?61bb:306
executeDispatch @ react-dom.development.js?61bb:389
executeDispatchesInOrder @ react-dom.development.js?61bb:414
executeDispatchesAndRelease @ react-dom.development.js?61bb:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js?61bb:3287
forEachAccumulated @ react-dom.development.js?61bb:3257
runEventsInBatch @ react-dom.development.js?61bb:3304
runExtractedPluginEventsInBatch @ react-dom.development.js?61bb:3514
handleTopLevel @ react-dom.development.js?61bb:3558
batchedEventUpdates$1 @ react-dom.development.js?61bb:21871
batchedEventUpdates @ react-dom.development.js?61bb:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js?61bb:3568
attemptToDispatchEvent @ react-dom.development.js?61bb:4267
dispatchEvent @ react-dom.development.js?61bb:4189
unstable_runWithPriority @ scheduler.development.js?3069:653
runWithPriority$1 @ react-dom.development.js?61bb:11039
discreteUpdates$1 @ react-dom.development.js?61bb:21887
discreteUpdates @ react-dom.development.js?61bb:806
dispatchDiscreteEvent @ react-dom.development.js?61bb:4168

пользовательская форма. js: 

const axios = require('axios');
import React from 'react'; 
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'
import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';

class UserForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      'user' : {
        'firstname' : '',
        'lastname' : '',
        'email' : '',
        'phone' : '',
        'address' : '',
        'zip' : '',
        'city' : '',
      },
    };
  }
  componentDidMount() {
    axios
      .get('/api/user.php')
      .then(response => (
        this.setState({user:{...this.state.user,firstname: JSON.parse(JSON.stringify(response.data['FIRSTNAME']))}}),       
        this.setState({user:{...this.state.user,lastname: JSON.parse(JSON.stringify(response.data['LASTNAME']))}}),        
        this.setState({user:{...this.state.user,email: JSON.parse(JSON.stringify(response.data['EMAIL']))}}),        
        this.setState({user:{...this.state.user,phone: JSON.parse(JSON.stringify(response.data['MOBILE_PHONE']))}}),
        this.setState({user:{...this.state.user,address: JSON.parse(JSON.stringify(response.data['ADDRESS']))}}), 
        this.setState({user:{...this.state.user,zip: JSON.parse(JSON.stringify(response.data['POSTAL_CODE']))}}),
        this.setState({user: {...this.state.user,city: JSON.parse(JSON.stringify(response.data['CITY']))}}),
        console.log({user:{...this.state.user,firstname: JSON.parse(JSON.stringify(response.data['FIRSTNAME']))}})

        ))
  }

  render() {
    return(
     <div className="user-form">
     <Form  id="user-form">
      <FormGroup  onChange={this.handleChange} id="user-data">
        <Label id="user-firstname-label">Prénom</Label>
        <Input name="firstname" id="user-firstname" type="text" defaultValue={this.state.user.firstname}/>
        <Label id="user-lastname-label">Nom</Label>
        <Input name="lastname" id="user-lastname" type="text" defaultValue={this.state.user.lastname}/>
        <Label id="user-email-label">Adresse e-mail</Label>
        <Input name="email" id="user-email" type="email" defaultValue={this.state.user.email}/>
        <Label id="user-phone-label">Numéro de téléphone</Label>
        <Input name="phone" id="user-phone" type="text" defaultValue={this.state.user.phone}/>
        <Label id="user-address-label">Adresse</Label>
        <Input name="adress" id="user-address" type="text" defaultValue={this.state.user.address}/>
        <Label id="user-zip-label">Code postal</Label>
        <Input name="zip" id="user-zip" type="text" defaultValue={this.state.user.zip}/>
        <Label id="user-city-label">Ville</Label>
        <Input name="city" id="user-city" type="text" defaultValue={this.state.user.city}/>
      </FormGroup>
      <Button>Sauvegarder</Button>
      </Form>
      </div> 

    );
  }
  handleChange(e) {   
    let change = ({user:{[e.target.name] : e.target.value }});
    console.log(change);
    this.setState(change);

    //OTHER TRIES

    //this.setState(JSON.stringify(change));

    // this.setState({ 
    //   user: {
    //     ...this.state.user,
    //     [e.target.name]: e.target.value,
    //   },
    // });

  }           
}
export default UserForm;

main. js

import React from 'react';
import ReactDOM from 'react-dom';
import UserProfile from './components/user-form'

ReactDOM.render(<UserProfile />, document.getElementById('app'));

The console.log кажется правильным:

enter image description here

Спасибо за помощь!

1 Ответ

1 голос
/ 02 апреля 2020

Ключевое слово this в JavaScript не работает, как в большинстве объектно-ориентированных языков:

Функция этого ключевого слова в JavaScript ведет себя немного по-другому по сравнению с другими языками. Он также имеет некоторые различия между строгим режимом и нестрогим режимом.

В большинстве случаев значение этого параметра определяется тем, как вызывается функция (привязка во время выполнения). Он не может быть установлен присваиванием во время выполнения и может отличаться при каждом вызове функции. ES5 ввел метод bind () для установки значения функции this независимо от того, как она вызывается, а ES2015 представил функции стрелок, которые не предоставляют собственную привязку this (он сохраняет значение this лексического контекста).

Источник: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Необходимо связать метод handleChange в конструкторе 

constructor(props) {
     // ...
     this.handleChange = this.handleChange.bind(this)
}

или определить handleChange как функция стрелки: 

handleChange = e => {
  // ...
}
...