2

シンプルな todo アプリを実装することで、react と関数型プログラミングを学ぼうとしています。親と子の間で情報を渡すという概念を見ようとしているだけなので、フラックスは使用していません。子のクリック イベントで親の関数をトリガーしようとしています。ただし、純粋な関数と状態の使用に関して、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または別のコンポーネントのコンストラクター内など) に更新できません。Render メソッドは props と state の純粋な関数であるべきです。コンストラクターの副作用はアンチパターンですが、componentWillMount.

4

2 に答える 2

1

によって与えられた答えにfinalfreq

また、関数をバインドする必要がありますthis

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

申し訳ありませんが、コメントする50の評判がありません。だからここに書いて

于 2016-10-04T07:06:26.907 に答える