@vvitto
Студент

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

Имеется простой 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. Заранее спасибо!
  • Вопрос задан
  • 240 просмотров
Решения вопроса 2
@LiguidCool
Используйте безимянные функции.
Ответ написан
devellopah
@devellopah
Сохранять 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>
  }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы