Почему не работает bind?

Question

[Vitaliy Vvitto]

Имеется простой React компонент

import React from "react";
import Task from "./task.jsx";

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

		this.state = {
			taskList: this.props.data
		};
		this.test = this.test.bind(this);
		
		console.log(this.test());
	}

	test(){
		console.log(this);
	}
	

	render(){
		let temp = this.state.taskList.map(function(item, index){
			return <Task data = {item} key = {index}  handle = {this.test}/>
		});

		return <div className = "board">
			{temp}
		</div>;
	}
}

Проблема в том, что bind не привязывается this к методу "test" и в консоли выводит "Cannot read property 'test' of undefined" при попытке передать метод в другой компонент через props. Заранее спасибо!

Answer 1

[Иван]

Используйте безимянные функции.

Comments

[Vitaliy Vvitto]

Ох, вот же я слепой баран xD. Спасибо большое)

[Иван]

Виталий Нижанковский: напомню что в таком варианте бинд не нужен.

[Islam Ibakaev]

безымянные

Answer 2

[Islam Ibakaev]

Сохранять props компонента в его локальном state - антипаттерн.
Ничего, если this.props.data определён как default props(не будет меняться), но в большинстве случаев будет(идёт из родительского state либо из глобального хранилища, то есть store).
Когда this.props.data обновится, локальный state останется прежним. Придётся дергать componentWillRecieveProps.
Данные, передаваемые как props почти всегда уже где-то храняться ( у родителя или в store ).
Грубо говоря, за ними уже следят. Незачем их пересохранять в дркгом компоненте.

Нельзя писать так handle = {this.test}. Пробелов быть не должно.

Учитывая всё вышенаписанное, компонент можно переписать так

export default class Board extends React.Component {
  test = () => {
    console.log(this)
  }
  
  render(){
    const temp = this.props.data.map((item, index) => 
      <Task data={item} key={index}  handle={this.test} />
    )

    return <div className="board">{temp}</div>
  }
}