반응, 순수한 기능 경고?

Question

간단한 TODO 앱을 구현하여 반응적이고 기능적인 프로그래밍을 배우려고합니다. 나는 부모와 자식 사이에 정보를 전달하는 개념을 보려고 할 때만 유선을 사용하지 않습니다. 자식의 클릭 이벤트에서 부모 함수를 트리거하려고합니다. 그러나 React에서 순수한 함수와 상태를 사용하는 것에 대한 매우 불쾌한 오류가 발생합니다. 누군가 내가 뭘 잘못하고 있으며, 옳은 일을하는 방법을 설명 할 수 있습니까? 내 기능에 대해 불순한 점은 내가 만드는 부작용이 보이지 않는다. 여기 내 코드는 다음과 같습니다.

var React = require('react'); 
var Todo = require('./Todo'); 

const todos = [ {task: "Eat", completed: false}, 
      {task: "Breathe", completed: false}, 
      {task: "Sleep", completed: false}]; 

var TodoList = React.createClass({ 
    getInitialState: function() { 
     return {todos: todos}; 
    }, 
    changeTodoStatus (task) { 
     var updatedTodos = this.state.todos.map(function(todo){ 
      if (task.task === todo.task) { 
       return {task: todo.task, completed: !todo.completed}; 
      } else { 
       return todo; 
      } 
     }); 
     this.setState({todos: updatedTodos}); 
    }, 
    render: function() { 
     var _that = this; 
     return(
      <div className="container"> 
       <div className="row list-of-things"> 
        <ul className="list-group"> 
         { 
          this.state.todos.map((todo, index) => { 
           return (<Todo clickHandler={ this.changeTodoStatus } key={index} todo={todo} />); 
          }) 
         } 
        </ul> 
       </div> 
      </div> 
     ); 
    } 
}); 

module.exports = TodoList; 

var Todo = React.createClass({ 
    handleClick(todo){ 
     this.props.clickHandler(todo); 
    }, 
    render: function() { 
     if(this.props.todo.completed === true){ 
      return (<li onClick={ this.handleClick(this.props.todo.task) } className="list-group-item list-group-item-success"><strike>{this.props.todo.task}</strike></li>); 
     } else { 
      return (<li onClick={ this.handleClick(this.props.todo.task) } className="list-group-item"> {this.props.todo.task} </li>); 
     } 
    } 
}); 

module.exports = Todo; 

어떤 도움이나 명확한 점이 크게 감사드립니다!

다음 오류입니다. bundle.js : 9139 경고 : setState (...) : 기존 상태 전환 (예 : render 또는 다른 구성 요소의 생성자) 중에 업데이트 할 수 없습니다. 렌더링 방법은 소품과 국가의 순수한 기능이어야합니다. 생성자 부작용은 반 패턴이지만 componentWillMount으로 이동할 수 있습니다.

Answer 1

todo 용 onclick 핸들러에서 실제로 참조하는 대신 해당 함수를 호출합니다. 내가 무엇을 할 당신의 도도 구성 요소의 내부 :

handleClick() { 
    this.props.clickHandler(this.props.todo); 
{ 

과의

렌더 단지

render: function() { 
    if(this.props.todo.completed === true){ 
     return (<li onClick={ this.handleClick } className="list-group-item list-group-item-success"><strike>{this.props.todo.task}</strike></li>); 
    } else { 
     return (<li onClick={ this.handleClick } className="list-group-item"> {this.props.todo.task} </li>); 
    } 
} 

당신은 지금 당신이 실제로 그렇게 빨리 구성 요소를 렌더링으로 this.handleClick(this.props.todo)을 요구하고있는 방법을 반응 패턴에 반대되는 상위 구성 요소에서 즉시 상태를 설정하는 함수를 호출합니다. 렌더링 메서드에서 상태를 설정하지 않습니다.

Answer 2

대답의 형식은 finalfreq

입니다.

또한 내가 의견을 50 평판이없는 this

<li onClick={ this.handleClick.bind(this) }

죄송와 기능을 결합해야합니다. 그래서 여기에 쓰십시오