如何使用對象屬性從數組中刪除對象 - React

Question

我有一個待辦事項列表，其中包含孫子中的刪除按鈕，單擊該按鈕時會在父級中觸發一個事件 - 我希望此事件刪除與單擊的孫子對應的數組條目。

父級（包含數組和我對函數的嘗試）

const tasks = [
  { name: 'task1', isComplete: false },
  { name: 'task2', isComplete: true },
  { name: 'task3', isComplete: false },
]

// taskToDelete is the name of the task - doesn't contain an object
deleteTask(taskToDelete) {
    this.state.tasks.remove(task => task.name === taskToDelete);
    this.setState({ tasks: this.state.tasks });

}

任何幫助將不勝感激

Answer 1

有兩個問題：

1. 你似乎試圖直接修改this.state.tasks 。 重要的是不要這樣做，永遠不要直接修改this.state或其上的任何對象。 請參閱state 的 React 文檔中的“不要直接修改狀態” 。

2. 您正在將一個對象傳遞給從當前狀態派生的setState 。 永遠不要這樣做也很重要。 :-) 相反，將setState傳遞給一個函數，並在調用該函數時使用它傳遞給您的狀態對象。 來自文檔中的“狀態更新可能是異步的” ：

   因為this.props和this.state可能會異步更新，所以你不應該依賴它們的值來計算下一個狀態...... [相反]......使用setState()的第二種形式，它接受一個函數而不是一個對象.

   （我的重點）

我認為您對數組的remove是假設性的，但為免生疑問，數組沒有remove方法。 在這種情況下，最好的做法是，因為我們需要一個新數組，所以使用filter刪除所有不應該仍然存在的條目。

所以：

deleteTask(taskToDelete) {
    this.setState(prevState => {
        const tasks = prevState.tasks.filter(task => task.name !== taskToDelete);
        return { tasks };
    });
}

Answer 2

您可以簡單地過濾數組：

this.setState(prevState => ({
    tasks: prevState.tasks.filter(task => task.name !== 'taskToDelete')
}));

同樣在基於this.state更新時，最好使用函數形式，因為setState是async 。

Answer 3

您可以使用過濾器按照不可變模式從數組中刪除一個對象（過濾器將創建一個新數組）：

deleteTask(taskToDelete) {
    const newTaskArray = this.state.tasks.filter(task => task.name !== taskToDelete);
    this.setState({ tasks: newTaskArray });

}

編輯：解決方案的共同依賴： https ://codepen.io/Dyo/pen/ZvPoYP

Answer 4

您可以實現deleteTask方法如下：

deleteTask(taskToDelete) {
  this.setState((prevState, props) => {
    const tasks = [...prevState.tasks];
    const indexOfTaskToDelete = tasks.findIndex(
      task => task.name === taskToDelete
    );
    tasks.splice(indexOfTaskToDelete, 1);
    return { tasks };
  });
}

A. 找到taskToDelete的索引。

B. 然后使用splice方法從集合中刪除項目

C. 然后調用setState用tasks更新狀態。

Answer 5

您可以使用higher order函數Array#filter來刪除任務。

let updatedTasks  =     this.state.tasks.filter(task => task.name !== taskToDelete);

this.setState({ tasks: updatedTasks });

Answer 6

我按照以下步驟從狀態數組中刪除了一個特定的選定對象：

在這里，我使用了一個復選框列表，當我選擇一個復選框時，它會將它添加到狀態數組中，當它被取消選擇時，它將從數組中刪除。

if (checked) {
            var tempObject = { checkboxValue: data, label: title }
            this.state.checkBoxState.push(resTemp);
        } else {
            var element = data; //data is coming from different method.
            for (let index = 0; index < this.state.checkBoxState.length; index++) {
                if (element === this.state.checkBoxState[index].checkboxValue) {
                    this.state.checkBoxState.splice(index, 1);
                }
            }
        }

我被這個問題困住了，我正在分享我的解決方案。 希望它會幫助你。