Ошибка при вызове функции?

Question

[Даниил Сугоняев]

class Wrap extends React.Component {
    constructor(props) {
        super(props);
        this.state = { tasks: [
            ['Первый', 'gkkk'],
            ['Второй', 'gkkk']
        ]};
        this.updateText = this.updateText.bind(this);
        this.deleteBlock = this.deleteBlock.bind(this);
    }
    deleteBlock(i) {
        var arr = this.state.tasks;
        arr.splice(i, 1);
        this.setState ({tasks: arr});
    }
    updateText(text, i) {
        var arr = this.state.tasks;
        arr[i] = text;
        this.setState ({tasks: arr});
    }
    eachTask(item, i) {
        return (<Task key={i} index={i} update={this.updateText} deleteBlock={this.deleteBlock}>
                {item}
                </Task>
               )
    }
    render() {
        return (
            <div className="card_wrap">
                {
                this.state.tasks.map(this.eachTask)
                }
            </div>
        )
    }
}

Я пытаюсь вызвать функции, передавая их в состояние update={this.updateText} deleteBlock={this.deleteBlock}. Но выдает ошибку undefined. В чем может быть проблема?

Answer 1

[davidnum95]

Функция eachTask не привязана к this компонента. Нужно по аналогии с updateText привязать функцию в конструкторе:
this.updateText = this.eachTask.bind(this);

Comments

[Даниил Сугоняев]

Не работает (

[davidnum95]

Даниил Сугоняев, во первых, в функциях updateText и deleteBlock вы мутируете стейт, перепишите. Во вторых, в качестве key не нужно использовать индекс массива. В третьих, скопируйте текст ошибки сюда.

[Даниил Сугоняев]

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

[davidnum95]

Даниил Сугоняев, текст ошибки то покажите

[Даниил Сугоняев]

davidnum95, https://yadi.sk/i/dbMDWFtR3PLPeU

[Даниил Сугоняев]

Вот полный код, если что

class Task extends React.Component {
    constructor(props) {
        super(props);
        this.state = {edit: false};
        this.editor = this.editor.bind(this);
        this.noEditor = this.noEditor.bind(this);
    }
    editor() {
        this.setState ({edit:true})
    }
    noEditor() {
        this.setState ({edit:false})
    }
    save() {
        var value = this.refs.head.value;
        var value = this.refs.body.value;
    }
    renderNorm() {
        return (
          <div className="card blue-grey darken-1">
            <div className="card-content white-text">
              <span className="card-title">{this.props.children[0]}</span>
              <p>{this.props.children[1]}</p>
            </div>
            <div className="card-action">
              <a href="#" onClick={this.editor}>Редактировать</a>
              <a href="#">Удалить</a>
            </div>
    </div>
        )
    }
    renderChange() {
        return (
          <div className="card blue-grey darken-1">
            <div className="card-content white-text">
              <input type="text" ref='head' placeholder={this.props.children[0]} />
              <input type="text" ref='body' placeholder={this.props.children[1]} />
            </div>
            <div className="card-action">
              <a href="#" onClick={this.noEditor}>Сохранить</a>
            </div>
    </div>
        )
    }
    render() {
        if(this.state.edit) {
            return this.renderChange();
        }
        else {
            return this.renderNorm();
        }
        
    }
};

class Wrap extends React.Component {
    constructor(props) {
        super(props);
        this.state = { tasks: [
            ['Первый', 'gkkk'],
            ['Второй', 'gkkk']
        ]};
        this.updateText = this.updateText.bind(this);
        this.deleteBlock = this.deleteBlock.bind(this);
        this.updateText = this.updateText.bind(this);
    }
    deleteBlock(i) {
        var arr = this.state.tasks;
        arr.splice(i, 1);
        this.setState ({tasks: arr});
    }
    updateText(text, i) {
        var arr = this.state.tasks;
        arr[i] = text;
        this.setState ({tasks: arr});
    }
    eachTask(item, i) {
        return (<Task key={i} index={i} update={this.updateText}>
                {item}
                </Task>
               )
    }
    render() {
        return (
            <div className="card_wrap">
                {
                this.state.tasks.map(this.eachTask)
                }
            </div>
        )
    }
}

const way = document.querySelector('#example');

ReactDOM.render(<Wrap />, way);

[davidnum95]

Даниил Сугоняев, в eachTask console.log(this); что выводит?

[Даниил Сугоняев]

davidnum95, undefined

[Даниил Сугоняев]

davidnum95, Все, я понял, спасибо большое)