Question

我在this.state.items中存储了一系列项目，用户可以通过点击修改this.state.items的按钮来添加/删除项目。

我有类似的东西。（此代码未经测试，可能无法编译，但您可能会得到这个想法。）

TextField = React.createClass({
    render() {
        return <input type="text"/>;
    }
});

TextList = React.createClass({
    getInitialState () {
        return {
          items: [<TextField />, <TextField />, <TextField />]
        };
    },

    addItem() {
        // Adds a new <TextField /> to this.state.items
    },

    removeItem(index) {
        // Filters out the item with the specified index and updates the items array.
        this.setState({items: this.state.items.filter((_, i) => i !== index)});
    },

    render() {
        return (
            <ul>
            {this.state.items.map((item, index) => {
                return (
                    <li key={index}>
                        {item}
                        <button onClick={this.props.removeItem.bind(null, index)}>Remove</button>
                    </li>
                );
            })}
            </ul>

            <button onClick={this.addItem}>Add New Item</button>
        );
    }
});

这可以删除this.state.items中的指定项目。我在控制台中看到它，这部分工作正常。但这不是向用户呈现的内容。

例如，如果有3个输入字段，并且用户分别键入“One”，“Two”和“Three”，那么如果他点击“Two”的删除按钮，则输入字段为“Three”被删除了。换句话说，总是删除最后一个字段。

如何解决这个问题，以便输入字段的值与删除的字段正确关联？

Answer 1

这是因为反应会根据物品的钥匙回收物品，以提高速度和效率。因此，使用始终为0,1,2等的索引会产生不良后果。

反应如何运作：

你有一个索引为0,1,2的项目列表：它们会产生反应。
用户删除第一项
该列表现在有2个项目：索引0,1
当反应重新呈现时，它会从你的键中扣除（错误地）项目0,1不变（因为键是相同的），并且第三项被删除。

解决方案：将密钥唯一设为特定项目。最好以项目内容为基础。

React：将输入字段的值与已删除的组件相关联

1 个答案: