Splice 正在删除数组的最后一个元素而不是索引 - React

Question

我希望每个笔记都有一个删除按钮，单击该按钮会在我的状态下从数组中删除该笔记，但 .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>
        );
    }

Answer 1

这里有几个问题。

首先，您要渲染一组您修改但未在要渲染的 div 上使用 key 的元素（请参阅：https://reactjs.org/docs/lists-and-keys.html#keys）。您的控制台应显示警告“警告：列表中的每个子项都应具有唯一的“键”道具。”。如果您向 div 添加一个键，它将按原样正确呈现您的代码。注释本身在您的示例中构成唯一键，尽管您可能希望稍后将其更改为不假定唯一注释值的东西。代码笔：https://codesandbox.io/s/eager-cray-41dv7

<div className="note" key={Note}>

第二个，但在第一次修复之后不那么重要，但稍后当你想让人们更新注释时会影响你：React 不支持 <textarea> 元素中的子元素。见https://reactjs.org/docs/forms.html#the-textarea-tag。

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

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

Answer 2

将您的deleteNote 方法修改为：

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

这是一个工作示例：https://codesandbox.io/s/serene-albattani-gymrx