TypeError: Cannot read property 'bind' of undefined в React.js, как исправить?

Question

StepanSnigur @StepanSnigur

React

TypeError: Cannot read property 'bind' of undefined в React.js, как исправить?

Здравствуйте,
при запуске приложения возникает ошибка: TypeError: Cannot read property 'bind' of undefined
браузер ругается на строку: this.NewTask = this.NewTask.bind(this);
вот мой код:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';

import Button from './components/Button';
import AddTaskInput from './components/Input';
import MainHeader from './components/Header';
import Task from './components/Task';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           items: 'Новая задача'
        }
 
        this.NewTask = this.NewTask.bind(this);
    } 
    render() {
        return (
            <div className="App">
                <HeaderWrapper>
                    <MainHeader />
                </HeaderWrapper>
                <Wrapper>
                    <AddTaskInput />
                    <Button onClick={this.NewTask} text="Add" />
                </Wrapper>
                <TasksWrapper>
                    <Task taskName={this.state.items}/>
                </TasksWrapper>
            </div>
        );
    }
}

export default App;

Вот код класса Button:

import React, { Component } from 'react';
import styled from 'styled-components';

class Button extends React.Component {
    render () {
        return (
            <StyledButton>{this.props.text}</StyledButton>
        );
    }
}
export default Button;

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

Вопрос задан более трёх лет назад
4020 просмотров

1 комментарий

Подписаться 1 Средний 1 комментарий

StepanSnigur @StepanSnigur Автор вопроса

ошибка исчезла, но функция не вызывается, можете, пожалуйста объяснить, почему?
вот код:

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           items: 'Новая задача'
        }
 
        this.NewTask = this.NewTask.bind(this);
    } 
    NewTask () {
        alert(1)
    }
    render() {
        return (
            <div className="App">
                <HeaderWrapper>
                    <MainHeader />
                </HeaderWrapper>
                <Wrapper>
                    <AddTaskInput />
                    <Button onClick={this.NewTask} text="Add" />
                </Wrapper>
                <TasksWrapper>
                    <Task taskName={this.state.items}/>
                </TasksWrapper>
            </div>
        );
    }
}

export default App;

Написано более трёх лет назад

Решения вопроса 1

5 комментариев

StepanSnigur @StepanSnigur Автор вопроса

я просто решил не включать styled components в вопрос, чтобы не загромождать код

Написано более трёх лет назад
Антон Спирин @rockon404 Куратор тега React

StepanSnigur, ну тогда вам стоило об этом написать.
Методы в JavaScript принято называть в camelCase. Замените NewTask на newTask, а еще лучше на addTask.
Ну и сам метод не забудьте реализовать.

Написано более трёх лет назад

StepanSnigur @StepanSnigur Автор вопроса

Антон Спирин, сделал вот так:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';

import Button from './components/Button';
import AddTaskInput from './components/Input';
import MainHeader from './components/Header';
import Task from './components/Task';


const Wrapper = styled.section`
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
`
const HeaderWrapper = styled.header`
    background: #9DB1CC;
`
const TasksWrapper = styled.div`
    width: 90%;
    margin: 0 auto;
    padding-top: 30px;

    &:last-child {
        margin-bottom: 50px;
    }
`

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           items: 'Новая задача'
        }
 
        this.addTask = this.addTask.bind(this);
    }
    addTask () {
        alert('1')
    }
    render() {
        return (
            <div className="App">
                <HeaderWrapper>
                    <MainHeader />
                </HeaderWrapper>
                <Wrapper>
                    <AddTaskInput />
                    <Button onClick={this.addTask} text="Add" />
                </Wrapper>
                <TasksWrapper>
                    <Task taskName={this.state.items}/>
                </TasksWrapper>
            </div>
        );
    }
}

export default App;

но функция не вызывается

Написано более трёх лет назад

Антон Спирин @rockon404 Куратор тега React

StepanSnigur, в компоненте Button в StylesButton onClick не пробрасываете. Обновил ответ. И настройте отступ в IDE на два пробела вместо четырех. Это стандарт в современной JS разработке.

Написано более трёх лет назад
StepanSnigur @StepanSnigur Автор вопроса

Антон Спирин, огромное спасибо, все заработало

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

React

+1 ещё

Простой
Как реализовать Микрофронтенд с использованием Vite с Typescript?
- 1 подписчик
- 6 часов назад
- 29 просмотров
0

ответов
React

Простой
У меня react up ложу .env REACT_APP_PASSWORD=пароль Локально все ок Но на гите не видит..почему?
- 1 подписчик
- 7 часов назад
- 41 просмотр
0

ответов
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- вчера
- 85 просмотров
2

ответа
React

Простой
Почему не рендерится React-компонент в методе render( )?
- 1 подписчик
- вчера
- 78 просмотров
1

ответ
React

Простой
У меня react up и я беру из .env пароль а мне бьет ошибку, как быть?
- 1 подписчик
- вчера
- 61 просмотр
0

ответов
JavaScript

+1 ещё

Средний
Сдвигается нижняя граница во время поиска Как исправить?
- 1 подписчик
- 16 апр.
- 47 просмотров
0

ответов
JavaScript

+4 ещё

Простой
Что делать, если после залива приложения на VPS страница остается недоступной?
- 1 подписчик
- 15 апр.
- 85 просмотров
2

ответа
React

Простой
В какую папку React компилирует все файлы?
- 1 подписчик
- 13 апр.
- 82 просмотра
2

ответа
React

+1 ещё

Средний
При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?
- 2 подписчика
- 13 апр.
- 317 просмотров
1

ответ
React

+1 ещё

Простой
Ошибка Cannot read properties of null (reading 'useContext')?
- 1 подписчик
- 13 апр.
- 41 просмотр
0

ответов
Показать ещё Загружается…

Frontend React

Glob-com

от 100 000 ₽

JS|React Native разработчик

Венста • Киров

от 60 000 до 120 000 ₽

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Разработка VST-плагина

19 апр. 2024, в 20:43

20000 руб./за проект

Нарисовать баннер для интернет-магазина

19 апр. 2024, в 20:35

500 руб./в час

Разработать несистемный алерт

19 апр. 2024, в 20:11

500 руб./за проект

ошибка исчезла, но функция не вызывается, можете, пожалуйста объяснить, почему?
вот код:
class App extends Component { constructor(props) { super(props); this.state = { items: 'Новая задача' } this.NewTask = this.NewTask.bind(this); } NewTask () { alert(1) } render() { return ( <div className="App"> <HeaderWrapper> <MainHeader /> </HeaderWrapper> <Wrapper> <AddTaskInput /> <Button onClick={this.NewTask} text="Add" /> </Wrapper> <TasksWrapper> <Task taskName={this.state.items}/> </TasksWrapper> </div> ); } } export default App;

Answer 1 · 2018-12-26 18:14:02

В компоненте App отсутствует метод NewTask, к которому вы пытаетесь обращаться в конструкторе.

В компонент Button пробросьте onClick:

class Button extends React.Component {
  render () {
    const { text, onClick } = this.props;

    return <StyledButton onClick={onClick}>{text}</StyledButton>;
  }
}

Answer 2 · 2018-12-26 18:13:10

NewTask это функция которая у вас не реализована. или удалите this.NewTask = this.NewTask.bind(this); или

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';

import Button from './components/Button';
import AddTaskInput from './components/Input';
import MainHeader from './components/Header';
import Task from './components/Task';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           items: 'Новая задача'
        }
 
        this.NewTask = this.NewTask.bind(this);
    } 

NewTask(){

}
    render() {
        return (
            <div className="App">
                <HeaderWrapper>
                    <MainHeader />
                </HeaderWrapper>
                <Wrapper>
                    <AddTaskInput />
                    <Button onClick={this.NewTask} text="Add" />
                </Wrapper>
                <TasksWrapper>
                    <Task taskName={this.state.items}/>
                </TasksWrapper>
            </div>
        );
    }
}

export default App;

TypeError: Cannot read property 'bind' of undefined в React.js, как исправить?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт