javascript - 为什么组件没有呈现正确的信息？ ReactJS

Question

我正在渲染一个值数组，并且有两个按钮，一个用于添加，另一个用于删除。一切都按其应有的方式工作，但是当我单击“删除”时，正确索引中的元素将从数组中删除，但当它再次呈现时，它会删除最后一个条目，而不是该特定索引处的条目。

例如: (左侧是网页，右侧是控制台)

当前数组是 ["hello", "world", "everyone"] 假设我想删除 "world" 然后我单击 Remove 按钮旁边，数组正确更新(我做了一个 console.log)，它变成 ["hello", "everyone"]，它重新渲染，但显示就好像数组是 ["hello", "world"] 并错误地渲染它:

我不确定我的代码做了什么错误，因为数组已正确更新，其他一切似乎都没有问题。

    childChange: function(name, valid, value) {

        this.state.values = this.props.values;
        var pattern = /[0-9]+/;                                             // Using regex to find last digits from 0-9
        var match = name.match(pattern);                                    // Update state
        var i = parseInt(match);                                            // Parse char into int
        // console.log(match);

        this.state.values[i] = value;

        this.setState(this.state);

        this.props.callback(                                                // Call parent callback
            this.props.name,
            this.props.node.valid(this.state.values),
            this.state.values
        );
    },

    addEmptyItem: function() {

        this.state.values = this.props.values;
        this.state.values.push("");
        this.setState(this.state);

    },

    removeItem: function(ev) {

        console.log(ev.currentTarget.dataset.index);
        var i = parseInt(ev.currentTarget.dataset.index);
        this.state.values = this.props.values;
        this.state.values.splice(i,1);
        console.log(this.state.values);
        this.setState(this.state.values);

    },

        render: function() {
            var that = this;

            console.log("===RENDER===");

            return (
                <div id = "form">
                {this.props.values.map(function(v, i) {
                    return (

                        <div>
                            {(that.props.node.get().constructor.name === "Parent") ?
                            <ParentComponent
                                name={that.props.name + i}
                                key={i}
                                timer={that.props.timer}
                                callback={that.childChange}
                                values={v}
                                newParent={that.props.node.get()}
                            />
                            :
                            <div>
                                <NodeComponent
                                    name={that.props.name + i}
                                    key={i}
                                    timer={that.props.timer}
                                    callback={that.childChange}
                                    value={v}
                                    newNode={that.props.node.get()}
                                />

                            </div>

                            }
                            <button data-index={i} onClick={that.removeItem}>Remove
                            </button>
                        </div>

                    )
                })}
                <button onClick={() => that.addEmptyItem()}>Add
                </button>

                </div>
           )

        }

Answer 1

将您的函数更改为如下所示:

removeItem: function(ev) {

        console.log(ev.currentTarget.dataset.index);
        var i = parseInt(ev.currentTarget.dataset.index);
        let values = [...this.props.values];
        values.splice(i,1);
        console.log(this.state.values);
        this.setState(values);

    }

为什么？当您使用 react 状态时，您永远不会直接更改它。你可以在 this article 中查看它。 你在这里所做的，是你改变了状态，然后你调用了“setState”，这是行不通的。您应该创建新变量，操作新变量，然后使用新变量调用 setState