Reactjs 拼接正在删除数组的最后一个元素，而不是索引-反应

我希望每个便笺都有一个删除按钮，当单击该按钮时，该按钮将从处于我的状态的数组中删除该便笺，但splice将删除最后一个元素，而不是索引

我添加了一个警报语句来验证索引是否正确。警报显示正确的编号，但拼接会删除最后一个元素。为什么会这样

constructor(props) {
        super(props);
        this.state = {
            Notes: ["1","2","3","4"]
        }
    }

    addNote = () => {
        var noteList = [...this.state.Notes];
        var newNote = "";
        this.setState({ Notes: noteList.concat(newNote) });
    }

    deleteNote = (index) => {
        var noteList = [...this.state.Notes];
        alert(index);
        noteList.splice(index, 1);
        this.setState({ Notes: noteList });
    }

    renderNotes(Notes) {
        return (
            <div>
                {Notes.map((Note, index) =>
                    <div class="note">
                        <div class="noteTop">
                            <button id="menu"><FontAwesomeIcon icon={faEllipsisV} /></button>
                            <button id="delete" onClick={() => this.deleteNote(index)}><FontAwesomeIcon icon={faTimes} /></button>
                        </div>
                        <textarea class="noteMain">{Note}</textarea>
                    </div>
                )}
            </div>
        );
    }

构造函数（道具）{
超级（道具）；
此.state={
注：[“1”、“2”、“3”、“4”]
}
}
addNote=（）=>{
var noteList=[…this.state.Notes]；
var newNote=“”；
this.setState（{Notes:noteList.concat（newNote）}）；
}
deleteNote=（索引）=>{
var noteList=[…this.state.Notes]；
警报（索引）；
注：接头（索引1）；
this.setState（{Notes:noteList}）；
}
renderNotes（注释）{
返回(
{Notes.map（（注意，索引）=>
此.deleteNote（索引）}>
{注}
)}
);
}

将您的

deleteNote

方法修改为：

deleteNote = (index) => {
    var noteList = this.state.Notes;
    alert(index);
    this.setState({ Notes:[...noteList.slice(0, index), ...noteList.slice(index + 1)] });
}

---

这里有一个工作示例：

这里有几个问题

首先，您正在呈现一个您修改过的元素数组，但没有在所呈现的div上使用

键

（请参见：）。您的控制台应该显示一条警告“警告：列表中的每个子项都应该有一个唯一的“键”道具。”。如果向div添加一个键，它将按原样使用代码正确呈现。在您的示例中，注释本身是唯一的键，尽管您可能希望稍后将其更改为不采用唯一注释值的值。代码笔：

第二，但在第一次修复之后就不那么重要了，但在以后您希望让人们更新注释时会影响您：React不支持

元素中的子元素。看

如果您在下面更改文本区号，您将在UI中看到正确反映的更新，并且在以后启用编辑时它将非常有用

<textarea className="noteMain" value={Note} />

这有相同的结果。它删除了警报显示正确索引的最后一个注释。在代码笔中尝试了此操作，结果删除了错误的元素。我添加了一个工作示例@briliston。您可以试试。您在哪里调用

renderNotes（）

？请注意，最好避免使用数组状态的索引值作为呈现元素列表的唯一键（在本例中，它是

），react.js在出于未知原因更改状态时似乎不能很好地处理这种情况，我还没有弄明白这一点。

<textarea className="noteMain" value={Note} />