在现有状态转换期间无法更新（例如在 `render` 中）。渲染方法应该是 props 和 state 的纯函数答案

【问题标题】：Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state在现有状态转换期间无法更新（例如在 `render` 中）。渲染方法应该是 props 和 state 的纯函数
【发布时间】：2017-04-18 16:45:04
【问题描述】：

代码：

var RecipeBox = React.createClass({

    getInitialState: function () {
        return {
           recipesArray: [],
           adding: false,
           editing: false,
           currentIndex: 0
        };
    },

    handleClick: function () {
        this.setState({
            adding: true
        }); 
    },
    handleEditClick: function(index) {
        this.setState({
            editing: true,
            currentIndex: index
        }); 
    },
    handleClose: function() {
        this.setState({
            adding: false,
            editing: false
        });
    },
    handleAdd: function(newRecipe) {
        this.setState({
            recipesArray: this.state.recipesArray.concat(newRecipe)
        });
        console.log(this.state.recipesArray);
    },
    handleEdit: function(newRecipe, index) {
        var newRecipesArray = this.state.recipesArray;
        newRecipesArray[index-1] = newRecipe;
        this.setState({
            recipesArray: newRecipesArray
        });

    },

    render: function() {
        var i = 0;
        var that = this;

        var recipes = this.state.recipesArray.map(function(item) {
            i++
            that.handleEditClickSingle = that.handleEditClick.bind(this, i);
            return (
                <div className="table">
                    <Recipe key={i} name={item.name} ingredients={item.ingredients} />
                    <button key ={"edit"+i} onClick={that.handleEditClickSingle} className="btn edit btn-primary">Edit</button>
                    <button  key ={"delete"+i} className="btn delete btn-danger">Delete</button>
                </div>
            );
        });

        return (
            <div>
                <h1>React.js Recipe Box</h1>
                <button className="btn btn-primary" onClick={this.handleClick}>Add Recipe</button>
                <table>
                    <tbody>
                        <tr>
                            <th>RECIPES</th>
                        </tr>
                    </tbody>
                </table>
                {recipes}
                { this.state.adding ? <AddRecipe handleClose={this.handleClose}  handleAdd={this.handleAdd} /> : null }
                { this.state.editing ? <EditRecipe currentIndex = {this.state.currentIndex} handleClose={this.handleClose}  handleEdit={this.handleEdit()}/> : null }
            </div>
        );
    },
});

情况：

错误：

在现有状态转换期间无法更新（例如在render 内）。渲染方法应该是 props 和 state 的纯函数。

我做错了什么？

问题的症结似乎在这里：

that.handleEditClickSingle = that.handleEditClick.bind(this, i);

【问题讨论】：

做这个任务的目的是什么？（你说得对，这就是问题所在。）
@Pointy 为了防止我得到的错误：错误：this.handleEditClick 不是 onClick 的函数
您可以从控制台添加您的error 日志吗？
@Panther 已解决。

标签： javascript reactjs

【解决方案1】：

解决方案：

var i = 0;
        var that = this;

        var recipes = this.state.recipesArray.map(function(item) {
            i++
            return (
                <div className="table">
                    <Recipe key={i} name={item.name} ingredients={item.ingredients} />
                    <button key ={"edit"+i} onClick={() => { that.handleEditClick(i)}} className="btn edit btn-primary">Edit</button>
                    <button  key ={"delete"+i} className="btn delete btn-danger">Delete</button>
                </div>
            );
        });

【讨论】：

【解决方案2】：

我认为您的问题在于下面一行中的render 方法

{ this.state.editing ? <EditRecipe currentIndex = {this.state.currentIndex} handleClose={this.handleClose}  handleEdit={this.handleEdit()}/> : null }

替换为

{ this.state.editing ? <EditRecipe currentIndex = {this.state.currentIndex} handleClose={this.handleClose}  handleEdit={this.handleEdit}/> : null }

您正在拨打this.handleEdit。相反，您应该像上面那样传递它。

【讨论】：

不。没有改变任何东西。