Question

我试图通过尝试实现一个简单的待办事项应用程序来学习反应和函数式编程。我没有使用flux，因为我只是想看看在父母和孩子之间传递信息的概念。我试图在子项中的单击事件中触发父项中的函数。但是，我从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处理程序中，您实际上是在调用这些函数而不是引用。我要做的是你的Todo组件内部：

 getItemMenuGson(new CallBack() {
    @Override
    public void onSuccess(List<Display_Activity_Model> itemMenuGsonList) {
        videoDetailList = itemMenuGsonList;

         //////////////////
        Video_Info.update(videoDetailList);
        ///////////////////

        Uri vidUri = Uri.parse(itemMenuGsonList.get(0).getMedia().getURL());
        vidView.setVideoURI(vidUri);

    }

并在渲染中执行

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> ); } }，所以只要组件呈现它就会调用那个在父组件中立即设置状态的函数，而这个函数与你没有反应的反应模式AKA相反。 t在渲染方法中设置状态

Answer 2

给finalfreq

给出的答案

您还必须使用this

绑定该函数

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

对不起，我没有50个评论的声誉。所以写在这里

反应，纯功能警告？

2 个答案: