Question

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

例如： （左侧是网页，右侧是控制台）

目前数组是["hello", "world", "everyone"]，我们要删除"world"并点击其旁边的Remove按钮，数组更新正确（我做了一个它变为["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);

    }

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

调用setState

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

1 个答案: