this.props.xxxx не является функцией - PullRequest
Новая
       38

this.props.xxxx не является функцией

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

class UserForm extends React.Component {
  constructor(props) {
    super(props);
    const { user } = props;
  }
  _cancelForm() {
    this.props.onCancel();
  }

  render() {
    return ( 
    <button onClick={this._cancelForm.bind(this)}> Cancel </button>
    );
  }
}

class UserCreate extends React.Component {
  _navigateToLogin() {
    console.log("hi")
  }

  render() {
    return ( 
    <div>
      <UserForm onCancel={this._navigateToLogin.bind(this)}/>
     </div>
    );
  }
}

ReactDOM.render( 
  <UserCreate/>,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>
import React from 'react'
import { withRouter } from 'react-router-dom';
import UserForm from './UserForm'
import UsersService from '../services/UsersService'

 class UserCreate extends React.Component{
    _navigateToLogin() {
      this.props.history.push('/homepage');
    }

    async _saveUser(user) {
      await UsersService.createUser(user);
      this._navigateToLogin();
    }

    render() {
        return(
            <div>
              <UserForm
                onCancel={this._navigateToLogin.bind(this)}
                onSubmit={this._saveUser.bind(this)} 
              />
            </div>
        );
    }

}

export default withRouter(UserCreate)

import React from 'react'
import {
  Button
} from '@material-ui/core'


export default class UserForm extends React.Component {
  constructor(props) {
    super(props);

    const { user } = props;

    this.state = {
       ...
    }


  _handleFormSubmit() {
    const user = {
      ...
    };
    this.props.onSubmit(user);
  }

  _cancelForm() {
    this.props.onCancel();
  }

  render () {
    return (
      <div style={{ width: '100%', height: 'auto', position: 'fixed', minWidth: '100%', minHeight: '100%', backgroundColor: '#50617C' }}>
              <Button size="small" onClick={ this._cancelForm.bind(this) }>Back</Button>
              <Button size="small" onClick={ this._handleFormSubmit.bind(this) }>Create</Button>
      </div>
    )
  }
}

При нажатии кнопки «Назад» на CreateAccountForm появляется ошибка, которая возвращает сообщение об ошибке Функция onCancel не является функцией. Я отправляю его в UserCreate с помощью привязки и вызываю функцию _cancelForm (). Я думал, что ошибка в том, что я что-то упустил в конструкторе согласно какой-то реактивной документации, я использовал до этого метод, и он работал, сейчас я не знаю, что происходит.

1 Ответ

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

Код, который вы разместили, не демонстрирует ошибку, ниже приведен ваш код, и он работает просто отлично. 

class UserForm extends React.Component {
  constructor(props) {
    super(props);
  }
  _cancelForm() {
    this.props.onCancel();
  }

  render() {
    return (
      <button onClick={this._cancelForm.bind(this)}>
        cancel
      </button>
    );
  }
}
class UserCreate extends React.Component {
  _navigateToLogin() {
    console.log('in navigate login');
  }

  render() {
    return (
      <div>
        <UserForm
          onCancel={this._navigateToLogin.bind(this)}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <UserCreate />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>

Можете ли вы предоставить минимальный фрагмент , который воспроизводит полученную ошибку?

Вам также не нужно привязать обработчик, если вы используете функции стрелок. Например: 

_navigateToLogin = () => {//arrow function is automatically bound to this
  console.log('in navigate login');
};

и 

<UserForm onCancel={this._navigateToLogin} />
...